CODEWITHSUNDEEP
javascripthtmlcss
Sal
Sal

Reputation: 1691

Can I print a CSS style property to the console using Javascript?

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

Upvotes: 5

Views: 13895

Answers (4)

NullPointer
NullPointer

Reputation: 7368

You need to check HTML part in this case.

  1. If you are setting from javascript then Your code is working fine.

  2. 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>

Upvotes: 0

عبدالرحمان
عبدالرحمان

Reputation: 485

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>

  • clientHeight includes padding.
  • offsetHeight includes padding, scrollBar and borders.

Upvotes: 0

benvc
benvc

Reputation: 15130

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>

Upvotes: 0

brk
brk

Reputation: 50316

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>

Upvotes: 6

Related Questions