Question

我在Javascript中动态创建了几个div。我想知道是否可以一次性设置它们。

#somediv {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

#somediv2 {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

......等等（这甚至可以是50个div）

我想将此更改为：

 #somediv* {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

Answer 1

为动态创建的div提供一个类，然后设置类的样式。或者，如果您将新的div插入容器中，您可以根据它进行选择：

<div id='stuff_goes_here'>
  <!-- ... dynamic divs will go here ... -->
</div>

然后：

#stuff_goes_here div {
  /* ... styles ... */
}

Answer 2

如果它们的样式完全相同，请使用课程look here for the difference：

.divClass {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

然后你的div就像这样：

<div id="somediv" class="divClass"></div>
<div id="somediv2" class="divClass"></div>

只需编辑脚本以包含类属性，这是迄今为止最简单的解决方案......这是完全用于哪些类：）

Answer 3

这是创建要处理的类属性。给你所有的div都是同一个类，你可以这样说：

.divclass {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

但如果你真的需要做你所要求的，你可以使用一种新形式的选择器。以下内容将匹配以“somediv”开头的所有ID，但这不适用于旧版浏览器：

[id^=somediv] {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

Answer 4

#somediv, #somediv2 {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

Answer 5

我个人建议使用class，因为这就是他们的目的;但是，你可以按照自己的意愿去做：

div[id^=somediv]
{
/* css styles */
}

使用CSS starts-with选择器（ http://reference.sitepoint.com/css/css3attributeselectors），虽然它依赖于您的用户/受众群体中的CSS 3（我认为）实现。

在一个css语句中设置常见的div组

5 个答案: