Got another basic question that I couldn't seem to find the answer for online. I can change the CSS property of an element easily using javascript,
document.getElementById("ExampleID").style.height="30px";
however whenever I try printing a property to the console, with
console.log(document.getElementById("ExampleID").style.height);
it prints a blank line instead of the property. How can I print a style property value of the desired element? Thank you very much
You can use getComputedStyle
let elem = document.getElementById('test');
let ht = window.getComputedStyle(elem, null).getPropertyValue("height");
console.log(ht).test {
height: 300px;
width: 300px;
border: 1px solid red;
}<div class="test" id="test">Test</div>Make sure you are testing with an actual element that will be returned from your selection (see example below). Otherwise your code is fine.
const elem = document.getElementById('elemId');
elem.style.height = '30px';
console.log(elem.style.height);<div id="elemId"></div>document.getElementById("ExampleID").style.height="30px";
console.log(document.getElementById('ExampleID').clientHeight);
console.log(document.getElementById('ExampleID').offsetHeight);
<div id="ExampleID">
clientHeight includes padding.<br>
offsetHeight includes padding, scrollBar and borders.
</div>
<br> tag does not use and does not need a closing slash and never has.
You need to check HTML part in this case.
If you are setting from javascript then Your code is working fine.
In case Styles defined in CSS use window.getComputedStyle()
The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.
Here is working snippet:
var divEle=document.getElementById("ExampleID");
console.log("Before:height::"+divEle.style.height);
console.log("Before:color::"+divEle.style.color);
var heightCss = window.getComputedStyle(divEle, null).getPropertyValue("height");
var colorCss = window.getComputedStyle(divEle, null).getPropertyValue("color");
console.log("Before:height from css::"+heightCss)
console.log("Before:color from css::"+colorCss)
function changeCss(){
divEle.style.height="30px";
divEle.style.color="blue";
console.log("After:height::"+divEle.style.height);
console.log("After:color::"+divEle.style.color);
}.divClass {
height: 40px;
color: red;
width: 40px;
border: 2px solid black;
}<div class="divClass" id="ExampleID">test</div><div><input type="button" onClick="changeCss();" value="Change Css"/></div>
ExampleIDelement have inline styles applied when you try to console log them? Styles defined in CSS can not be accessed withElement.style.