batkhuat91 batkhuat91 - 2 months ago 13
CSS Question

Get CSS element value by JS and Jquery

I insert css in 3 ways


  • Inline style (p1)

  • Internal style sheet (p2)

  • External style sheet (p3)



I want to get value of css in each by Javascript && Jquery . Please show me how .

I cant get the value of p2 , p3 in same way as p1 . What's wrong ?

Many thanks !



window.onload = abc();

function abc(){
var p1 = document.getElementById('p1').style.height;
document.getElementById('p1').innerHTML = p1;
var p2 = document.getElementById('p2').style.width;
document.getElementById('p2').innerHTML = p2;
var p3 = document.getElementById('p3').style.height;
document.getElementById('p3').innerHTML = p3;
}

#p3{
width: 200px;
height: 200px ;
background-color: aqua ;
}

<!DOCTYPE html>
<head>
<title>CSS Element output</title>

</head>
<body>
<H1>CSS output element property</H1>
<div id="p1" style="height:50px;width:100px;">check p1</div>
<div id="p2">check p2</div>
<style>
#p2{
height:50px;
width:400px;
background-color: bisque
}
</style>
<div id="p3">check p3</div>

</body>





**

strong text



**

Answer

When you use dot notation, you are asking for an attribute. Only the first element has a style attribute, so this is why only your first attempt works.