Sunday 30 September 2018

JavaScript: getting inline styles attached to an element

By using 'element.style.propertyName', you can get the styles attached to given element (Only inline styles, not external and embedded styles information).

If any property has minus (-) sign in it, you have to access the property value using camel case like 'element.style.fontFamily'.

For example,
font-size should be used like fontSize
font-family should be used like fontFamily

process.js
function processData(){
 var para = document.getElementById("paragraph1");
 alert("Color : " + para.style.color);
 alert("Background color : " + para.style.backgroundColor);
}

window.onload = processData;


styleAccess.html
<!DOCTYPE html>

<html>

<head>
    <title>Accessing style properties</title>
    <script src="process.js"></script>
</head>

<body>

    <p id="paragraph1" style="color:white; background-color:black;">
        JavaScript is fun to learn
    </p>
</body>

</html>





Previous                                                 Next                                                 Home

No comments:

Post a Comment