Как я могу приложить метод к объекту для изменения CSS

Я хотел создать метод, чтобы я мог динамически изменять CSS элемента без длинных методов document.getElementsByTagName("div")[0].style.borderColor = "red" и реализовывать что-то подобное в библиотеке jQuery. Однако, когда я пытаюсь прикрепить метод css к элементу как этотКак я могу приложить метод к объекту для изменения 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

источник

2014-12-25 1252748

Вы должны проверить длину document.querySelectorAll (Сель), прежде чем доступ к узлу при нулевом индексе. –

Вы должны опубликовать весь код, так как ошибка не возникает в коде, который вы опубликовали. – Musa

sel может появиться или не определено. –

вы не возвращаете эль из функции

при вызове __shorthandCss() ничего не возвращается, на котором css() функция присутствует как собственность, так что вы должны вернуть эль на который вы назначили CSS()

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; 
};

Рекомендации для

Вы можете использовать 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>

источник

2014-12-25 17:55:06

Если я не устанавливаю его равным переменной, например 'var css = __shorthandCSS.css ({" height ":" 15px "});' какое значение возвращает делать? т.е. где он возвращается? Благодарю. – 1252748

На самом деле метод css() не возвращает никакой вещи и не должен. Метод __shorthand() должен возвращать «el», поскольку el имеет метод css() на нем –

Как я могу приложить метод к объекту для изменения CSS

ответ

Смежные вопросы