Question

我需要将data-role="none"添加到当前使用cssclass="classname"的所有按钮中，我可以进入实际的CSS文件并设置data-role="none"或者我需要进入我的实际ASP.NET页面上的每个按钮并将它们应用于硬编码，如果我可以将那些放入该文件的行？

Answer 1

不在CSS但您可以使用jQuery添加。

如果你的HTML是这样的：

<button class="classname">Submit</button>

jQuery应该是这样的：

<script>
$(document).ready(function(){
    $("button.classname").attr("data-role","none");
});
</script>

但如果你的HTML是这样的：

<input type="button" class="classname" name="btnSub" value="Submit" />

jQuery应该是：

<script>
$(document).ready(function(){
    $("input[type='button'].classname").attr("data-role","none");
});
</script>

selector会有很大的不同。

如果你是jQuery的新手。请快速了解link如何使用它。

Answer 2

在CSS中不可能，但可以使用jQuery轻松完成。

$( ".classname" ).attr( "data-role", "none" );

Answer 3

您显然正在尝试使用CSS声明设置HTML属性。 CSS无法实现这一点。

应用于元素的CSS样式不适用于属性。相反，每个HTML元素都具有单独的属性集，这些属性独立于属性并且仅受样式表的影响。这可能会令人困惑，因为许多HTML元素具有width和height等属性以及同名的样式表属性，但它们不同的东西。今天的约定和规则不鼓励使用这些属性来支持CSS样式表。

实现目标的一个好方法是使用JavaScript或jQuery。网上有很多关于如何影响HTML元素属性的例子。例如，jQuery有一个convenient way可以使用数据属性（您似乎也使用它）：

jQuery.data(element, "role", "none");

与上述

相同的效果更容易alternative approach

$(elementSelector).data("role", "none");

示例代码会将属性"data-role"设置为"none"。请注意，使用这些方法在属性名称中缺少"data-" - jQuery会自动处理它。

对于您的情况，jQuery代码如下所示：

$(".classname").data("role", "none");

假设您考虑class而不是cssclass。如果您将ASP.NET与标准Web控件一起使用，则ASP.NET CssClass属性将呈现为HTML class属性，因此上述内容适用于您

Answer 4

不，您当然无法使用CSS设置任何HTML属性。 CSS不能以任何方式更改HTML标记或与其对应的DOM属性中的任何内容。它只会影响元素的渲染（并且可能会掩盖HTML属性的影响，但不会改变它）。

您应该使用服务器端工具ASP来生成属性。为此目的使用客户端脚本通常是没有意义的，因为使用data-*属性的主要原因是为客户端脚本提供要处理的特定于元素的数据。因此，脚本基本上会告知自己已经知道的事情。

请注意，data-role不是自定义属性名称的特别好的选择，因为它可能与规范中定义的属性role混淆。但是，没有针对这种名称选择的具体规则。

data-role =＆＃34; none＆＃34;在CSS中设置？

4 个答案: