Question

我的HTML，

<div id="parent">
    <div id="child">

    </div>

</div>

css看起来像，

#parent{
height:100px;
width:200px;
any-aother-property1:something;
any-aother-property2:something;
any-aother-property3:something;
}

是否有任何方法可以立即将所有属性继承到子级，我可以这样做，

$('#child').properties= $('#parent').properties

Answer 1

这够了吗？

#parent, #parent > div {
    /* your properties */
}

Answer 2

复制内联：

$('#child').get(0).style = $('#parent').get(0).style;

但如果你找到其他答案中所述的CSS方式会更好。

更新：

获取所有样式：

$('#child').get(0).style = window.getComputedStyle($('#parent').get(0), null);

Answer 3

如果您确实想要动态继承在运行时提供给母的所有 CSS属性，则可以执行以下操作。警告：这可能不是你想要的。

#child { all: inherit; }

Answer 4

据我所知，没有这样的事情，但你总能做到这样的事情：

#parent, #child{
    height:100px;
    width:200px;
    any-aother-property1:something;
    any-aother-property2:something;
    any-aother-property3:something;
}

添加两个id以具有相同的属性。

Answer 5

由于孩子默认继承了父母的大多数风格，因此您可以专注于清除孩子的风格，而不是将其设置为等同于父母的风格。

在Chrome和Opera中，您可以使用一行代码执行此操作：

$('#child')[0].style.all= 'unset';

这适用于child的CSS属性是在样式表中还是动态创建的。

要仅清除动态创建的CSS，您可以在所有现代浏览器中执行此操作：

$('#child')[0].style.cssText= '';

这将恢复样式表属性。

您的问题的跨浏览器解决方案可能如下：

var cs= getComputedStyle($('#child')[0]);
for (var i=0 ; i<cs.length; i++) {
  $('#child').css(cs[i], 'inherit');
}

这会遍历所有child的样式，将它们设置为从父项继承。

您可以在此Fiddle中的不同浏览器中测试这些方法中的每一种：

<强> http://jsfiddle.net/9c3sy2eb/7/

Answer 6

我在我的库custags.js中添加了一个函数，该函数将帮助您完成此操作。

这是extendcss()，它要求元素的查询选择器或其他方法起作用。您可以对任何类型的元素执行此操作，将其设置为equals或parent-child。

这是工作示例：-

const parent = document.querySelector('.parent')
const child = document.querySelector('.child');
Ω('#button').on('click', ()=>{
Ω('document').extendcss(parent, child);
});

.parent{
background-color: teal;
color: yellow;
}

<script src="https://obnoxiousnerd.github.io/custags.js/custags.min.js"></script>
<h1 class = "parent">Parent</h1>
<h1 class = "child">Child</h1>
<button id="button">Give child some css</button>

从父div到子div继承所有css属性

6 个答案: