Question

如何将css元素添加到现有的css类中？

CSS：

.usrgrid {
    color:blue;
    background-color:white;
}

有没有办法将属性添加到.usergrid？

我试过$(.usergrid).css("display","block");，但它没有用。

感谢。

＆＃13;

 $(".usergrid .k-button").css({ "display": "block" });

＆＃13;

.usergrid .k-button{
  color:black;
  background-color:white;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" />
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

＆＃13;

Answer 1

试试此代码

  $('.usergrid').css("display","block");

Answer 2

您还可以使用以下语法设置多个css属性：

$('.usergrid').css({"display": "block", "background-color": "white"});

Answer 3

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
jQuery(document).ready(function(){
   jQuery('.usergrid').css("display","block"); 
});
</script>

Answer 4

这里的问题是你无法向解析的CSS添加内容。您只能向特定元素添加内联样式。说，你有一个<div class="usrgrid">。你这么做的唯一修改是：<div class="usrgrid" style="color: red">。此处使用.css显示的示例就是这样做的。

其他选项包括：

动态添加CSS代码
动态链接CSS文件

<强>更新

所以，我现在意识到问题来自哪里。你有一个元素，你想以某种方式修改它。例如，它是隐形的，然后变得可见，或者它具有白色背景，然后变成黄色，无论如何。这里的关键点是你有你的初始状态和＆＃34;修饰符＆＃34;为了它。如果你拿走修改器，你会回到事情的起点。从CSS的角度来看，它意味着：

.my-elem {}

.my-elem--big {}

.my-elem--yellow {}

.my-elem--visible {}

现在，在你的JS中你只需要为你的元素添加一组适当的修饰符（类）。

<div class="my-elem"></div>

<div class="my-elem my-elem--visible"></div>

CSS有一个名为BEM的命名约定。它解决了这个问题。简而言之，您将UI拆分为块，元素和修饰符。

通过遵循这种方法，您可以分离关注点（元素应该变得可见的逻辑，JS，以及它是什么意思，它是可见的，CSS）并使您的代码更加愉快（无处不在的结构和可预测性）

我个人总是尽量避免使用我的JS中的任何CSS。即使只是display: block。因为这两个是针对不同的事情。

如何将元素添加到现有的css类

4 个答案: