어떻게하면 객체를 변경하여 객체를 변경할 수 있습니까?

필자는 단축 된 메소드 document.getElementsByTagName("div")[0].style.borderColor = "red"없이 요소의 CSS를 동적으로 변경할 수있는 메소드를 만들고 싶었고 jQuery 라이브러리와 비슷한 기능을 구현했습니다. 내가 잘못 여기에 무슨 짓을어떻게하면 객체를 변경하여 객체를 변경할 수 있습니까?

Uncaught TypeError: Cannot read property 'css' of undefined

: 그러나, 나는 오류를 얻을이

var __shorthandCss = function(sel){ 

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

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

    }; 

};

같은 요소에 css 방법을 첨부하려고? 나는 완전히 잘못된 방식으로이 일에 대해 갔습니까?

JSBIN

출처

2014-12-25 1252748

액세스 노드 전에 document.querySelectorAll (SEL)의 길이를 확인해야합니다 0 인덱스에서. –

게시 한 코드에서 오류가 발생하지 않으므로 전체 코드를 게시해야합니다. – Musa

sel이 null 또는 undefined 일 수 있습니다. –

당신은 당신이 할당 된 엘을 반환해야하므로 css() 함수는 속성으로 존재하는 당신이 __shorthandCss()를 호출 할 때 아무 것도 반환되지 않습니다

기능에서 엘을 반환하지 않습니다 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() 메소드는 아무 것도 반환하지 않으므로 가정하지 않습니다. el에 메소드 css()가 있으므로 __shorthand() 메소드는 "el"을 반환해야합니다. –

어떻게하면 객체를 변경하여 객체를 변경할 수 있습니까?

답변

관련 문제