JPN*_*JPN 51 javascript css jquery properties dynamic
我遇到了一个独特的情况,到目前为止我无法找到解决方案:动态地为CSS样式赋值.我知道如何使用jQuery为元素分配宽度,高度等,但我想要做的是实际更改样式表中定义的值,以便可以将动态创建的值分配给多个元素.
我正在构建的是一个占据整个视口的图像幻灯片,重新计算图像的大小,高度和左侧属性,以便图像始终居中,有利于宽度超过高度,除非视口高于它宽(调整大小不会重新加载页面,只需触发一个函数来调整图像大小).
我已经成功地让它在一个图像上工作,现在我正在尝试确定将这些属性值分配给幻灯片中所有图像的最佳方法,而不必为每个图像单独指定这三个项目.
可以动态修改类中属性的值吗？我确定答案就在那里,我可能只是在我的搜索中没有使用正确的术语.希望我能很好地描述这个问题.TIA.
小智 28
与此处的一些答案相反,使用Javascript编辑样式表本身不仅可行,而且性能更高.简单地完成$('.myclass').css('color: red')将最终循环遍历与选择器匹配的每个项目并单独设置样式属性.这是非常低效的,如果你有数百个元素,它将导致问题.
更改项目上的类是一个更好的主意,但您仍然遇到同样的问题,因为您正在更改N个项目的属性,这可能是一个很大的数字.更好的解决方案可能是在一个单个父项或少数父项上更改类,然后使用css中的"Cascade"命中目标项.这适用于大多数情况,但不是全部.
有时您需要将很多项目的CSS更改为动态的内容,或者通过点击少数父母来实现这一点是没有好办法的.更改样式表本身,或添加一个小的新样式来覆盖现有的css是一种非常有效的方式来更改项目的显示.您只在一个位置与DOM交互,浏览器可以非常有效地处理这些更改.
jss是一个库,可以帮助您更轻松地从javascript直接编辑样式表.
Ori*_*iol 22
您可以使用以下功能:
function setStyle(cssText) {
var sheet = document.createElement('style');
sheet.type = 'text/css';
/* Optional */ window.customSheet = sheet;
(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
return (setStyle = function(cssText, node) {
if(!node || node.parentNode !== sheet)
return sheet.appendChild(document.createTextNode(cssText));
node.nodeValue = cssText;
return node;
})(cssText);
};
特点:
setStyle,因此如果不调用它,则不会创建任何样式表.setStyle例
var myCSS = setStyle('*{ color:red; }');
setStyle('*{ color:blue; }', myCSS); // Replaces the previous CSS with this one
浏览器支持
至少,它适用于IE9,FF3,Chrome 1,Safari 4,Opera 10.5.
还有一个IE版本,适用于现代浏览器和旧版本的IE!(适用于IE8和IE7,但可能会崩溃IE6).
Jac*_*ton 18
好问题.这里的很多答案都有一个解决方案,直接与你提出的问题相矛盾
"我知道如何使用jQuery指定宽度,高度等方面的因素,但我想要做的是真正改变在样式表中定义的值,以便动态创建的值可以被分配到多个元素.
"
jQuery .css样式元素内联:它不会改变物理CSS规则!如果你想这样做,我建议使用一个vanilla JavaScript解决方案:
document.styleSheets[0].cssRules[0].cssText = "\
#myID {
myRule: myValue;
myOtherRule: myOtherValue;
}";
这样,您将设置样式表css规则,而不是附加内联样式.
希望这可以帮助!
就像@benvie所说的那样,更有效地更改样式表而不是使用jQuery.css(它将循环遍历集合中的所有元素).每次调用函数时都不要在头部添加新样式也很重要,因为它会产生内存泄漏和数千个必须由浏览器单独应用的CSS规则.我会做这样的事情:
//Add the stylesheet once and store a cached jQuery object
var $style = $("<style type='text/css'>").appendTo('head');
function onResize() {
var css = "\
.someClass {\
left: "+leftVal+";\
width: "+widthVal+";\
height: "+heightVal+";\
}";
$style.html(css);
}
此解决方案将通过每次调整大小仅修改DOM一次来更改样式.请注意,对于有效的js缩小和压缩,您可能不希望漂亮地打印css,但我这样做是为了清晰.
小智 5
使用jquery在以下内容中添加样式覆盖<head>:
$('<style>.someClass {color: red;} input::-webkit-outer-spin-button: {display: none;}</style>')
.appendTo('head');
我有一个更改特定CSS类中的值的解决方案。但是，只有将CSS保留在标记中，它才有效。如果只是保留从外部文件ex到CSS的链接。
<style src='script.js'></style>
该解决方案将不起作用。
例如，如果您的CSS看起来像这样：
<style id='style'>
.foo {
height:50px;
}
</style>
您可以使用JS / jQuery更改标签的值。
我已经写了一个函数，也许它不是最好的函数，但是它起作用了。您可以根据需要进行改进。
function replaceClassProp(cl,prop,val){
if(!cl || !prop || !val){console.error('Wrong function arguments');return false;}
// Select style tag value
var tag = '#style';
var style = $(tag).text();
var str = style;
// Find the class you want to change
var n = str.indexOf('.'+cl);
str = str.substr(n,str.length);
n = str.indexOf('}');
str = str.substr(0,n+1);
var before = str;
// Find specific property
n = str.indexOf(prop);
str = str.substr(n,str.length);
n = str.indexOf(';');
str = str.substr(0,n+1);
// Replace the property with values you selected
var after = before.replace(str,prop+':'+val+';');
style=style.replace(before,after);
// Submit changes
$(tag).text(style);
}
然后只需将tag变量更改为您的样式标签ID并举例说明：
replaceClassProp('foo','height','50px');
和$（'。foo'）。css（'height'，'50px'）;之间的区别；是当您使用jQuery的css方法执行此操作时，所有具有.foo类的元素在DOM中都将具有可见的style ='height：50px'。如果按照我的方式进行操作，元素将保持不变，唯一会看到的是class ='foo'
好处
缺点
希望它能有所帮助。
| 归档时间： |
|
| 查看次数： |
97693 次 |
| 最近记录： |