How to Get a Style Attribute from a CSS Class by JavaScript/Jquery

How to get a style attribute from a CSS class by javascript/jQuery?

I wrote a small function that traverses the stylesheets on the document looking for the matched selector, then style.

There is one caveat, this will only work for style sheets defined with a style tag, or external sheets from the same domain.

If the sheet is known you can pass it in and save yourself from having to look in multiple sheets (faster and if you have colliding rules it's more exact).

I only tested on jsFiddle with some weak test cases, let me know if this works for you.

function getStyleRuleValue(style, selector, sheet) {
    var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
    for (var i = 0, l = sheets.length; i < l; i++) {
        var sheet = sheets[i];
        if( !sheet.cssRules ) { continue; }
        for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
            var rule = sheet.cssRules[j];
            if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
                return rule.style[style];
            }
        }
    }
    return null;
}

example usage:

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]);

edit:

I neglected to take into consideration grouped rules. I changed the selector check to this:

if (rule.selectorText.split(',').indexOf(selector) !== -1) {

now it will check if any of the selectors in a grouped rules matches.

jquery to change style attribute of a div class

Just try $('.handle').css('left', '300px');

Get all CSS properties for a class or id with Javascript/JQuery

Use document#styleSheets and extract all rules from all stylesheets into array. Then filter the array by the selectorText.

Note: I've used a simple Array#includes to check if the requested selector appears in selectorText, but you might want to create a stricter check to prevent false positives. For example the selector text .demo can find rules for .demogorgon as well.

const findClassRules = (selector, stylesheet) => {  // combine all rules from all stylesheets to a single array  const allRules = stylesheet !== undefined ?     Array.from((document.styleSheets[stylesheet] || {}).cssRules || [])     :      [].concat(...Array.from(document.styleSheets).map(({ cssRules }) => Array.from(cssRules)));     // filter the rules by their selectorText  return allRules.filter(({ selectorText }) => selectorText && selectorText.includes(selector)); };
console.log(findClassRules('.demo', 0));

.demo {  color: red;}
.demo::before {  content: 'cats';}

Get an elements style inherited from classes not style attribute

Well, I don't think you can get the style directly from the stylesheets. But I think you can use below code for a workaround:

if( typeof( $('#alice').attr('style') ) != 'undefined' ) { 
   $('#alice').removeAttr('style'); 
   var aliceSheets = $('.alice').css('color');
   console.log(aliceSheets);
}

If you want to get the style only without changing the style of the element then you can add the style attribute back after reading the color.

How to use jquery to get style attribute of an element

Do you mean something like

$(".panel").mouseenter(function () {    var $this = $(this),        $h2 = $this.children('h2'),        $p = $this.children('p'),        h2c = $h2.css('background-color'),        pc = $p.css('background-color');
    $h2.css('background-color', pc);    $p.css('background-color', h2c);}).mouseleave(function () {    $(this).children('h2, p').css('background-color', '');})

.panel h2 {    background-color: lightgrey;}.panel p {    background-color: lightblue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="panel">    <h2 class="title">This is the title</h2>    <p class="desc">This is a decription</p></div><div class="panel">    <h2 class="title">This is the title</h2>    <p class="desc">This is a decription</p></div><div class="panel">    <h2 class="title">This is the title</h2>    <p class="desc">This is a decription</p></div>

Adding and removing style attribute from div with jquery

You could do any of the following

Set each style property individually:

$("#voltaic_holder").css("position", "relative");

Set multiple style properties at once:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Remove a specific style:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Remove the entire style attribute:

$("#voltaic_holder").removeAttr("style")

How to get CSS class property in Javascript?

For modern browsers you can use getComputedStyle:

var elem,
    style;
elem = document.querySelector('.test');
style = getComputedStyle(elem);
style.marginTop; //`20px`
style.marginRight; //`20px`
style.marginBottom; //`20px`
style.marginLeft; //`20px`

margin is a composite style, and not reliable cross-browser. Each of -top -right, -bottom, and -left should be accessed individually.

fiddle

How to Get a Style Attribute from a CSS Class by JavaScript/Jquery