发表新帖
发表新帖

Change CSS class properties with jQuery

后端 未结
关注
8 1553
心在旅途
心在旅途 2020-11-29 04:59

Is there a way to change the properties of a CSS class, not the element properties, using jQuery?

This is a practical example:

I have a div with class

相关标签:
8条回答
  • 旧巷少年郎
    2020-11-29 05:25

    $(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);

    styleSheetIndex is the index value that corresponds to which order you loaded the file in the <head> (e.g. 0 is the first file, 1 is the next, etc. if there is only one CSS file, use 0).

    rule is a text string CSS rule. Like this: "body { display:none; }".

    lineIndex is the line number in that file. To get the last line number, use $(document)[0].styleSheets[styleSheetIndex].cssRules.length. Just console.log that styleSheet object, it's got some interesting properties/methods.

    Because CSS is a "cascade", whatever rule you're trying to insert for that selector you can just append to the bottom of the CSS file and it will overwrite anything that was styled at page load.

    In some browsers, after manipulating the CSS file, you have to force CSS to "redraw" by calling some pointless method in DOM JS like document.offsetHeight (it's abstracted up as a DOM property, not method, so don't use "()") -- simply adding that after your CSSOM manipulation forces the page to redraw in older browsers.

    So here's an example:

    var stylesheet = $(document)[0].styleSheets[0]; stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);

    0 讨论(0)
  • 名媛妹妹
    2020-11-29 05:28

    You may want to take a different approach: Instead of changing the css dynamically, predefine your styles in CSS the way you want them. Then use JQuery to add and remove styles from within Javascript. (see code from Ajmal)

    0 讨论(0)
  • 耶瑟儿～
    2020-11-29 05:34

    In case you cannot use different stylesheet by dynamically loading it, you can use this function to modify CSS class. Hope it helps you...

    function changeCss(className, classValue) {
    // we need invisible container to store additional css definitions
    var cssMainContainer = $('#css-modifier-container');
    if (cssMainContainer.length == 0) {
        var cssMainContainer = $('<div id="css-modifier-container"></div>');
        cssMainContainer.hide();
        cssMainContainer.appendTo($('body'));
    }

    // and we need one div for each class
    classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
    if (classContainer.length == 0) {
        classContainer = $('<div data-class="' + className + '"></div>');
        classContainer.appendTo(cssMainContainer);
    }

    // append additional style
    classContainer.html('<style>' + className + ' {' + classValue + '}</style>');
}

    This function will take any class name and replace any previously set values with the new value. Note, you can add multiple values by passing the following into classValue: "background: blue; color:yellow".

    0 讨论(0)
  • 旧时难觅i
    2020-11-29 05:34

    You can remove classes and add classes dynamically

    $(document).ready(function(){
    $('#div').removeClass('left').addClass('right');
});
    0 讨论(0)
  • 再見小時候
    2020-11-29 05:35

    You can't change CSS properties directly with jQuery. But you can achieve the same effect in at least two ways.

    Dynamically Load CSS from a File

    function updateStyleSheet(filename) {
    newstylesheet = "style_" + filename + ".css";

    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        css = $("head").children(":last");

        css.attr({
          id: "dynamic_css",
          rel:  "stylesheet",
          type: "text/css",
          href: newstylesheet
        });
    } else {
        $("#dynamic_css").attr("href",newstylesheet);
    }
}

    The example above is copied from:

    • How To Switch CSS Files On-The-Fly Using jQuery

    Dynamically Add a Style Element

    $("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');

    The example code is copied from this JSFiddle fiddle originally referenced by Alvaro in their comment.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-11-29 05:39

    Didn't find the answer I wanted, so I solved it myself:
    modify a container div!

    <div class="rotation"> <!-- Set the container div's css -->
  <div class="content" id='content-1'>This div gets scaled on hover</div>
</div>

<!-- Since there is no parent here the transform doesnt have specificity! -->
<div class="rotation content" id='content-2'>This div does not</div>

    css you want to persist after executing $target.css()

    .content:hover {
    transform: scale(1.5);
}

    modify content's containing div with css()

    $(".rotation").css("transform", "rotate(" + degrees + "deg)");

    Codepen example

    0 讨论(0)
 看不清?
提交回复
热议问题