Question

我想创建一个方法，这样我就可以在没有longhanded方法document.getElementsByTagName("div")[0].style.borderColor = "red"的情况下动态更改元素的CSS，并实现类似jQuery库中发生的事情。但是，当我尝试将css方法附加到像这样的元素

时

var __shorthandCss = function(sel){

  var el = document.querySelectorAll(sel)[0];
  el.css = function(attrs){

       for (var attr in attrs){
         el.style[attr] = attrs[attr];
       }

  };

};

我收到错误：

Uncaught TypeError: Cannot read property 'css' of undefined

我在这里做错了什么？我是以完全错误的方式解决这个问题吗？

JSBIN

Answer 1

你没有从函数

返回el

当你调用__shorthandCss（）时，没有返回任何css()函数作为属性存在的内容，因此你需要返回你已经分配了css（）

的el

var __shorthandCss = function(sel){

  var el = document.querySelectorAll(sel)[0];
  console.log(el);
  el.css = function(attrs){

       for (var attr in attrs){
         console.log(attr, attrs)
         el.style[attr] = attrs[attr];
       }

  };
  return el;
};

<强> Recomendation

您可以使用document.querySelector(sel)代替document.querySelectorAll(sel)[0]，因为它做同样的事情

工作演示：

var __shorthandCss = function(sel){
  
  var el = document.querySelector(sel);
  console.log(el);
  el.css = function(attrs){
    
       for (var attr in attrs){
         console.log(attr, attrs)
         el.style[attr] = attrs[attr];
       }
    
  };
  return el;
};
var trig = function(){
   __shorthandCss("#a").css({"borderColor": "red"});
   console.log(a);
};  
document.getElementById("b").addEventListener("click", trig);

div{
  border: 1px solid black;
  padding: 5px;
  width: 150px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button type="button" id="b">change border</button>
  <div id="a">test div</div>
</body>
</html>

如何将方法附加到对象以更改CSS

1 个答案: