CSS类没有属性答案

【问题标题】：No attribute for CSS classCSS类没有属性
【发布时间】：2014-10-14 10:39:23
【问题描述】：

Google 没有提供太多帮助，可能是因为我不知道如何表达我的问题。有没有办法通过<style>为特定类型的元素指定CSS类？例如，如果我希望 div 中的所有复选框都有一个“checkbox-inline”class（是的，那是 Bootstrap），我不能这样做：

<style>
     input[type=checkbox] 
     {
         class: checkbox-inline;
     }
</style>

这似乎不起作用。没有"class" 属性（至少Intellisense 没有显示）。

【问题讨论】：

我不确定使用 CSS 应用类，使用 Jquery 绝对是可能的。但是你总是可以在input[type=checkbox] { /* all css properties of class checkbox-inline can go here */ }中写checkbox-inline类的属性@

标签： html css asp.net webforms

【解决方案1】：

不，这不是 CSS 的用途。

您可以使用 JavaScript 来执行此操作，但这只会在您的页面加载后发生：

纯 JavaScript

var elems = document.querySelectorAll('input[type=checkbox]');

for (var i = 0; i < elems.length; i++)
  elems[i].className += " checkbox-inline";

.checkbox-inline {
    display: block;
}

<input type="checkbox" /> Checkbox 1<br>
<input type="checkbox" /> Checkbox 2<br>
<input type="checkbox" /> Checkbox 3<br>
<input type="checkbox" /> Checkbox 4

jQuery

$('input[type=checkbox]').addClass("checkbox-inline");

.checkbox-inline {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" /> Checkbox 1<br>
<input type="checkbox" /> Checkbox 2<br>
<input type="checkbox" /> Checkbox 3<br>
<input type="checkbox" /> Checkbox 4

然而，最好的解决方案是手动更改您的 HTML 文件。

【讨论】：

很公平。尽管几乎所有的答案都在说同样的事情，但这个答案在很多方面都比其他答案好。接受。谢谢。
而且我无法更改 HTML 文件。输出代码由 ASP.NET CheckBoxList 控件生成。
@dotNET 在这种情况下，最好的选择是更改您的 ASP.NET 代码以添加类。IIRC ASP.NET 控件有一个 CssClass 属性，但已经有很长时间了我使用过 ASP.NET，所以这可能不正确。
ASP.NET 控件确实有CssClass 属性，但CheckBoxList 是一个复合控件，它在输出中呈现table，它又包含我要定位的复选框。所以使用CssClass 并没有多大帮助。无论如何，我想我可以和 JS 一起生活。再次感谢。

【解决方案2】：

CSS 不能用于这样的操作。您需要 JavaScript 才能将类添加到某些元素。

【讨论】：

【解决方案3】：

没有办法使用 CSS 来设置项目的类别。

如果你想改变一个元素的类，你必须用 Javascript 来做。

由于您已经在使用 bootstrap，因此您也可以使用 jQuery。这样的事情可能会起作用：

$('input[type=checkbox]').each(function() {
    $(this).class('checkbox-inline');
});

【讨论】：

【解决方案4】：

如果我理解正确，您想在 div 中的所有复选框上添加一个类。抱歉，如果不使用 JAVASCRIPT，这将是不可能的。

或者，如果您在项目中使用 jQuery，您将能够用更少的代码行来完成它

【讨论】：

【解决方案5】：

不，你可以，但如果你使用 Bootsrap，为什么不使用 jQuery。

$(document).ready(function(){
   $("input[type=checkbox]").addClass('checkbox-inline');
});

【讨论】：