How to get style of a div from javascript file

Question

Iam new to javascript, I have given style for a div by using javascript in one js file and i want to get that style from another js file. how it is possible?? when i used var height= $("#searchComment").css("height"); and on alerting the result it is get like 'undefined'. if this style is given in html it returns correctly. test1.js and test2.js are included in index.html In test1.js ihave given styling to a div of id 'searchComment'

$( "#parentDiv").append("<div class='ui-li-desc' id='searchComment' style='height:50px; width:40 px'></div>");

and in another js file test2.js i want to get the style of div of id 'searchComment'.
how can i get this style?? please help me.
Thank you

Can you please reformulate your question, giving also a better example. Also, trying to anwser you problem as I understant it, javascript supports global variables which are accesible among all the files. — Athafoud, Sep 25 '14 at 12:09

score 3 · Answer 1 · answered Sep 25 '14 at 12:10

3

use jquery selector and then change css:

   $('.number').css({'font-size': '12px', 'text-align': 'left'});

answered Sep 25 '14 at 12:10

durgesh.patle

710
6
24

score 3 · Answer 2 · answered Sep 25 '14 at 12:18

You have to give ID for that div by using the id you can get it from other JS

Limitation :

Both js should be using in that HTML file.

Before using id of <div> you have to create that div

Ex :

test1.js

$("#commentList").append(<div class='number' id="mydiv" style='font-size: 18px; 
text-align: justify; direction: rtl; float: right; width: 12%; padding-top:75px;'>
   some Variable</div>);

test2.js

document.getElementById("mydiv").style;

Sandesh Damkondwar · Accepted Answer · 2014-09-25T12:18:03.413

You can change of any elements style from any file, But the standard practice is to add class instead of changing style of an element. To add class you can use .addClass('new-class') jQuery function. And put all your style for new class in separate CSS file. And if you just want to add style anyway without caring about standard, then you can use .css jquery function.

$(".number").css({
  'attribute1': value,
  'attribute2': value,
});

score 1 · Answer 4 · edited May 23 '17 at 12:10

i think you want the description of the css class use. refer the post

function getStyleRules(className) {
    var class = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < class.length; x++) {
        if (class[x].selectorText == className) {
            (class[x].cssText) ? alert(class[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyleRules('.YourClassName');

click here

How to get style of a div from javascript file

4 Answers4