Javascript 停止特定CSS类的继承
我必须修改一个现有的HTML5应用程序，它有两种不同类型的主题 例如，我有这样的东西：Javascript 停止特定CSS类的继承,javascript,html,css,Javascript,Html,Css,我必须修改一个现有的HTML5应用程序，它有两种不同类型的主题 例如，我有这样的东西： <body class="theme1 theme2"> <div id="div1">I'm happy with both themes</div> <div id="div2">I just want theme 2</div> </body> 但这似乎不起作用。我认为这只适用于直接应用于元素的类。无论如何，我更喜
<body class="theme1 theme2">
<div id="div1">I'm happy with both themes</div>
<div id="div2">I just want theme 2</div>
</body>
我发现的信息似乎与防止继承特定属性有关。在我的例子中，我想阻止继承div2及其所有子类的theme1类下的任何属性。属性是继承的，类不是
停止继承属性的唯一方法是为给定元素的属性指定一个值。属性是继承的，类不是
停止继承属性的唯一方法是为给定元素的该属性指定一个值。由于“theme1”不是div“div2”的类，因此代码不起作用 我不知道如何按照您的要求有选择地删除继承。我能想到的最接近的解决方案是使用嵌套来创建更具体的选择器，并覆盖不需要的样式。简单的例子：
.theme2 {
font-style: italic;
}
.theme2 #div2 {
font-style: normal;
}
这将从div2中“删除”斜体样式。您必须重新定义所有不需要的样式。从维护的角度来看，这可能是也可能不是一个可接受的解决方案。但是它确实解决了问题。代码不起作用，因为“theme1”不是div“div2”的一个类 我不知道如何按照您的要求有选择地删除继承。我能想到的最接近的解决方案是使用嵌套来创建更具体的选择器，并覆盖不需要的样式。简单的例子：
.theme2 {
font-style: italic;
}
.theme2 #div2 {
font-style: normal;
}
这将从div2中“删除”斜体样式。您必须重新定义所有不需要的样式。从维护的角度来看，这可能是也可能不是一个可接受的解决方案。但是它确实解决了问题。不，CSS不是这样工作的。如果由于祖先上的类而将属性应用于子代，并且无法更改该类或属性，则必须重写不希望继承的属性（，通过更具体的选择器） e、 g
不，CSS不是这样工作的。如果由于祖先上的类而将属性应用于子代，并且无法更改该类或属性，则必须重写不希望继承的属性（，通过更具体的选择器） e、 g
让我们从一些
common.js//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version)bod.className = className;
}
function E(e){
return doc.getElementById(e);
}
function removeParentClassName(childId, removeClassName){
var cn = new RegExp('(\s+)?'+removeClassName, 'i'), pn = E(childId).parentNode;
pn.className = pn.className.replace(cn, '');
}
//]]>
让我们从一些
common.js//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version)bod.className = className;
}
function E(e){
return doc.getElementById(e);
}
function removeParentClassName(childId, removeClassName){
var cn = new RegExp('(\s+)?'+removeClassName, 'i'), pn = E(childId).parentNode;
pn.className = pn.className.replace(cn, '');
}
//]]>
使用纯CSS可以做到这一点的一种方法是像这样设置CSS规则
.theme1 .div1,
.theme2 .div1,
.theme1 .div2,
.theme2 .div2 {font-style:normal;} /* apply theme1 and theme2 styles here */
.theme1.theme2 .div2 {font-style:italic;} /* apply theme2 only rules here */
使用纯CSS可以做到这一点的一种方法是像这样设置CSS规则
.theme1 .div1,
.theme2 .div1,
.theme1 .div2,
.theme2 .div2 {font-style:normal;} /* apply theme1 and theme2 styles here */
.theme1.theme2 .div2 {font-style:italic;} /* apply theme2 only rules here */
只能从包含类的元素中删除该类。在您的情况下，您应该从body元素中删除类，或者将类添加到div中。使用Jquery$（'#div2'）.parent（）.removeClass（'theme1'）@4EACH-目标是阻止一个属性继承到div2中，同时让它应用到div1。从父类中删除该类将使其无法应用于任何一个类。提供的示例非常简单。实际的应用程序有许多父元素。我不能从body中删除类，body不是相关元素的直接父级。另外，我没有使用jQuery。您可以使用JavaScript中的
Element.className=Element.className=inheritinherit