定义class css,改变CSS类定义(changing CSS class definition)

假设我有这个类:

.MyClass{background:red;}

这个类适用于多个div的。 我想通过改变MyClass中定义的颜色改变背景橙色的颜色。

现在,我知道我可以做$('.MyDiv').css('background', 'orange');

但我的问题是真的这样的:我该如何更改CSS类定义,以便MyClass的元素现在有background:orange; ? 我希望能够从一个颜色改变几个CSS颜色属性到另一个。

谢谢。

Answer 1:

其实改变你的样式表是非常具有挑战性的。 要容易得多,不过,你可以切换出你的风格来一个不同的,这可能足以满足您的目的。 见我如何使用jQuery切换我的CSS样式表? 。

对于真正改变样式表的内容, 如何更改/在运行时删除CSS类的定义? 将让你开始。

Answer 2:

这是很难找到你想要的规则,因为你必须通过迭代document.styleSheets[i].cssRules阵列。 (并与比较你的类名selectorText属性)

所以,我解决这个问题是要增加一个新的CSS类,从HTML元素中删除旧的CSS类,并添加,而不是它这个类。

var length = getCssRuleLength(); var newClassName = "css-class-name" + length; //remove preview css class from html element. $("#your-html-element").removeClass("css-class-name"); $("#your-html-element").removeClass("css-class-name" + (length-1)); $("#your-html-element").addClass(newClassName); //insert a css class insertCssRule("." + newClassName + ' { max-width: 100px; }', length); function getCssRuleLength() { var length = 0; if (document.styleSheets[1].cssRules) { length = document.styleSheets[1].cssRules.length; } else if (document.styleSheets[1].rules) { //ie length = document.styleSheets[1].rules.length; } return length; } function insertCssRule(rule, index) { if (document.styleSheets[1].cssRules) { document.styleSheets[1].insertRule(rule, index); } else if (document.styleSheets[1].rules) { //ie document.styleSheets[1].addRule(rule, index); } }

Answer 3:

这里是我的答案,以防有人绊倒在此。 给你的元素不存在新的班级名称,然后动态地添加样式片段:

var companyColor = 'orange' //define/fetch the varying color here

var style = '';

$('html > head').append($(style));

//give any element that needs this background color the class "company-background"

Answer 4:

你有2个选择

添加一个新的样式表覆盖此.MyClass

具有不同特性的第二级,并改变对这些元素的类名称

Answer 5:

看着你的问题,我认为更好的办法是改用MyClass的别的东西使用JavaScript,而不是动态改变类的属性。

但是,如果你仍然热衷于此,你可以切换CSS样式表使用jQuery http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

Answer 6:

var changeClassProperty = function(sheetName, className, propertyName, newValue, includeDescendents) {

var ending = '$';

setValue = '';

if (includeDescendents === true) {

ending = '';

}

if (typeof(newValue) != 'undefined') {

setValue = newValue;

}

var list = document.styleSheets;

for (var i = 0, len = list.length; i < len; i++) {

var element = list[i];

if (element['href'] && element['href'].match(new RegExp('jquery\.qtip'))) {

var cssRules = element.cssRules;

for (j = 0, len2 = cssRules.length; j < len2; j++) {

var rule = cssRules[j];

if (rule.selectorText.match(new RegExp(className + ending))) {

cssRules[j].style.backgroundColor = setValue;

console.log(cssRules[j].style.backgroundColor);

}

}

}

}

}

changeClassProperty('jquery.qtip', 'tipsy', 'backgroundColor', 'yellow');

Answer 7:

你会关闭添加和删除类,而不是试图改变他们好得多。

例如

.red {

background: red;

}

.orange {

background: orange;

}

$('#div').click(function(){

$(this).removeClass('red').addClass('orange');

});

文章来源: changing CSS class definition

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值