Question

我正在尝试使用javascript设置DIV的样式。如果用户单击DIV，它将动态更改onclick后传递的属性的值。我想尝试这个以保存我的代码，这就是我选择jquery css的原因。但是，该物业不起作用。这有可能还是有其他方法可以实现？感谢

   <script> 
       function changeProperty(mine , property , value){
          $(mine).css({ property :  value }); //if I change the property to 'background' for example, it works properly, but I want property to remain so that i will not be changing the property from time to time
       }
   </script>
   <div  onclick="changeProperty(this, 'background', 'red');">
      change background
   </div>
   <div  onclick="changeProperty(this, 'font-size', '15px');">
      change font size
   </div> 
   <div  onclick="changeProperty(this, 'font', 'Arial');">
      change font
   </div>

Answer 1

这是因为您向css方法传递了一个包含property属性的对象。在这种情况下，最好将两个参数传递给css方法：

function changeProperty(mine , property , value){
    $(mine).css(property, value);
}

但是，如果要传递对象，可以动态构建它：

function changeProperty(mine , property , value){
    var obj = {};
    obj[property] = value;
    $(mine).css(obj);
}

另一个改进是在函数内使用this值（在这种情况下与mine相同）：

function changeProperty(property , value){
    $(this).css(...);
}

然后在HTML中，您将拥有changeProperty.call(this, "font", "Arial")。

.css( propertyName, value )

为匹配元素集设置一个或多个CSS属性。



propertyName：CSS属性名称。

输入：String



value：要为属性设置的值。

类型：字符串或数字

Answer 2

尝试将值直接包装到对象中，将值传递给函数：

  <script> 
       function changeProperty(mine, css){ 
          $(mine).css(css);
       }
   </script>
   <div  onclick="changeProperty(this, {'background' : 'red'});">
      change background
   </div>
   <div  onclick="changeProperty(this, {'font-size' : '30px'});">
      change font size
   </div> 
   <div  onclick="changeProperty(this, {'font-family' : 'Arial'});">
      change font
   </div>

http://jsfiddle.net/kLd6vp9c/

Answer 3

在您的问题中注意到，在选择jquery框架来实现此功能时，您有一些疑问。我认为时间已接近我们可能不得不开始放弃jquery并寻找更原生的方法，HTML5亲自看到它发生。这是一个开放的思想和更大胆的方法，如果你愿意，可以解决你的问题，并为你的代码提供性能提升。

function changeProperty(mine , property , value){
mine.style[property] = value;
}

请参阅此链接，找出您要申请的确切媒体资源名称，http://www.w3schools.com/jsref/dom_obj_style.asp 而已！！完全按照原样调用你的onclick事件处理程序。这篇文章不是为了敲打jquery，我自己也是一个巨大的粉丝。上帝知道我从这个框架中学到了很多东西。但是，我们开始实施原生代码并考虑利用HTML5所有辛勤工作的表现来推动网络作为一个平台。

如何使用jquery动态更改css的属性

3 个答案:

`.css( propertyName, value )`