javascript - 如何使用 jQuery(或 JS)编写 CSS 以应用于当前和 future 的比赛？

Question

我想根据屏幕高度动态设置元素 .selected 的高度。 $('.selected').css('height', height); 和 $('.selected').height(height); 工作但是当另一个元素成为 .selected 它不受此规则的影响。

我真正想做的是这样的:

var s = $('<style>.selected{height:'+height+'px}</style>').appendTo(document.head);
...
// change the height later
s.remove();
s = $('<style>.selected{height:'+new_height+'px}</style>').appendTo(document.head);

有更好的方法吗？

Answer 1

您可以使用 document.styleSheets[0].insertRule(".selected{height:"+new_height+"px}", 0); 或类似方法。 You can read more about manipulating stylesheets with insertRule here

总的来说，你所做的很好。如果我是你，我会保留对你的样式元素的引用，并用这样的新元素替换它:

var s = $('<style>.selected{height:'+height+'px}</style>').appendTo(head);
...
// change the height later
s.replaceWith('<style>.selected{height:'+new_height+'px}</style>');