Organizational Research By

Surprising Reserch Topic

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  using -''

How can I access a property from a CSS class by jQuery?
I have a CSS class like:

.highlight {
    color: red;
}


And I need to do a color animation on an object:

$(this).animate({
    color: [color of highlight class]
}, 750);


So that I can change from red to blue (in the CSS) and my animation will work in accordance with my CSS.

One approach would be to place an invisible element with the highlight class and then get the color of the element to use in the animation, but I guess this is a very, very bad practice.

Any suggestions?
    
asked Oct 13, 2015 by thiru
0 votes
25 views



Related Hot Questions



Government Jobs Opening

" rel="nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> " rel="nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
TEST
answered Oct 13, 2015 by virendra.bajaj
0 votes

I've just wrote this function get all styles by a selector. Notice: The selector must be the same as in the CSS.

    /**
     * Gets styles by a classname
     * 
     * @notice The className must be 1:1 the same as in the CSS
     * @param string className_
     */
    function getStyle(className_) {

        var styleSheets = global_.document.styleSheets;
        var styleSheetsLength = styleSheets.length;
        for(var i = 0; i < styleSheetsLength; i++){
            var classes = styleSheets[i].rules || styleSheets[i].cssRules;
            var classesLength = classes.length;
            for (var x = 0; x < classesLength; x++) {
                if (classes[x].selectorText == className_) {
                    var ret;
                    if(classes[x].cssText){
                        ret = classes[x].cssText;
                    } else {
                        ret = classes[x].style.cssText;
                    }
                    if(ret.indexOf(classes[x].selectorText) == -1){
                        ret = classes[x].selectorText + "{" + ret + "}";
                    }
                    return ret;
                }
            }
        }

    }
answered Oct 13, 2015 by ajit.chavhan
0 votes

Here's another method: add a hidden div with the class applied. Use jQuery.css to look up the style value. Then remove the element.

http://plnkr.co/edit/Cu4lPbaJWHW42vgsk9ey

function getStyleValue(className, style) {
  var elementId = 'test-' + className,
    testElement = document.getElementById(elementId),
    val;

  if (testElement === null) {
    testElement = document.createElement('div');
    testElement.className = className;
    testElement.style.display = 'none';
    document.body.appendChild(testElement);
  }

  val = $(testElement).css(style);
  document.body.removeChild(testElement);
  return val;
}

console.log( 'The style value is ' + getStyleValue('dark-red', 'color') );
answered Oct 13, 2015 by manju bhargava
0 votes

Why don't add .highlighted class, cache the color style, than remove it and animate to cached color? I.e. don't append elements and don't parse & loop styles.

jsfiddle example

var $element = $('.my-class').addClass('highlighted');
var colorToAnimate = $element.css('color');

$element.removeClass('highlighted');

alert(colorToAnimate);
.my-class {
  color: blue;
}
.highlighted {
  color: red;
}
" rel="nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
Animated color text
answered Oct 13, 2015 by devkumargupta

...