JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parentdiv">
<textarea id="ta1" class="childtextarea"></textarea>
</div>
CSS
.parentdiv > .childtextarea {
width: 570px;
}
.parentdiv > .someotherclass {
width: 200px;
}
JavaScript
var getCSS = function (prop, fromClass) {
var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
$("body").append($inspector); // add to DOM, in order to read the CSS property
try {
return $inspector.css(prop);
} finally {
$inspector.remove(); // and remove from DOM
}
};
var getCSS2 = function (prop, fromClass, $sibling) {
var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
if ($sibling != null) {
$sibling.after($inspector);
} else {
$("body").append($inspector); // add to DOM, in order to read the CSS property
}
try {
return $inspector.css(prop);
} finally {
$inspector.remove(); // and remove from DOM
}
};
// now call it
alert(getCSS('width', 'childtextarea'));
alert(getCSS2('width', 'childtextarea', $('#ta1')));
alert(getCSS2('width', 'someotherclass', $('#ta1')));