Let's say you want to change the width of many elements, to simulate a table, for example. I realize you could do this:
$(".class").css('width', '421px');
This alters the inline style='width: 421px;'
attribute for each element . Now, what I'd LIKE to do: is change the actual CSS rule definition:
.class {
width: 375px; ==[change to]==> 421px;
}
When it comes to 100's if not 1000's of nested <ul>
and <li>
that need to be changed, it seems like this would be better for performance than trying to let jQuery do the work through the .css()
method.
I've found this example - this IS what I'm trying to do:
var style = $('<style>.class { width: 421px; }</style>')
$('html > head').append(style);
I'm NOT trying to swap classes ( $el.removeClass().addClass()
), because I can't have a class for EVERY optimal width (379px, 387px, 402px..).
I could create a <style>
element and dynamically set the width, however I'm thinking there's a better way.
Native JS method: can jquery manipulate the global css definition of the document?
jQuery Plugin by Ariel Flesler: https://github.com/flesler/jquery.rule
document.styleSheets [0] .addRule在Chrome中工作,在FF中不是“函数”
What works for me is to include an empty style block in the header:
<style id="custom-styles"></style>
And then manipulate that with something like this:
$('#custom-styles').text('h1 { background: red }')
I've tested this appears to work in current version of Chrome (well, Chromium - 63.0) and Firefox (57.0.4).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.