batkhuat91 batkhuat91 - 1 month ago 11x
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;

width: 200px;
height: 200px ;
background-color: aqua ;

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

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



strong text



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.