자바 스크립트 또는 jQuery를 사용하여 모든 HTML 요소에 CSS 추가

CSS 선택기, 속성 및 값을 가져 와서 jQuery 또는 Javascript를 사용하여 HTML에 추가하고 싶습니다. 내가 지금까지 시도 무엇자바 스크립트 또는 jQuery를 사용하여 모든 HTML 요소에 CSS 추가

은 이것이다 :

function toggleCSS() { 
    var preview = document.getElementById("preview"); 
    var previewChildren = document.getElementById("preview").querySelectorAll("*"); // Get all of the elements created in the preview from the users HTML input 
    var cssToAdd = document.getElementById("cssTextArea").value; // The user is going to type in regular CSS into a textarea, and here I am retrieving the value they typed in 

    $(previewChildren).each(function() { 
     $(this).css(); // Looping through each node 
    }); 
}

예 입력 : (HTML)

<html> 
<head> 
    <title>Test</title> 
</head> 

<body> 

    <div> 
     Hello World! 
    </div> 

    <div id="TestDiv"> 
     This is a test! 
    </div> 
</html>

(CSS)

#TestDiv { 
    background-color: red; 
}

난에 붙어 무엇입니까 CSS를 추가하는 부분. 변수 cssToAdd에 원시 입력이 있지만이 CSS를 변환하여 선택기를 가져와 해당 선택기 내에서 각 HTML 요소에 속성을 추가하려면 어떻게해야합니까?

출처

2016-09-30 Dom

당신이하려는 것은 무엇이든간에 그것은 현재 매우 명확하지 않기 때문에 더 자세한 설명이 필요합니다. 깨진 코드는 적절한 설명 대신 좋은 대체물이 아닙니다. – charlietfl

'document.getElementById ("preview")는 미리보기의 ID가없는 요소가 있기 때문에 문제가됩니다. 예제를 표시하려면 작업 순서대로 확인하거나 javascript가 html과 일치하는지 확인하십시오. – NewToJS

@NewToJS HTML 요소 "preview"는 문제와 관련이 없습니다. 모든 것을 추가하면 질문이 복잡해집니다. – Dom

cssTextArea의 값을 previewChildren의 단일 요소와 관련된 올바른 CSS 규칙 집합이라고 가정하면 해당 객체를 가져 와서 css() 함수로 전달하면됩니다. 사용자가 적절하고 완전한 CSS 규칙을 입력하면

$(this).css({ "background-color": "red", "color":"black",...})

이 http://api.jquery.com/css/#css-properties

출처

2016-09-30 00:23:39 varontron

위의 CSS 예제 (#TestDiv)를 사용하여 선택기 (#TestDiv)와 속성을 얻은 다음 위의 선을 사용하여 추가하는 방법을 알고 계십니까? – Dom

여러 줄 정규식을 사용할 수 있습니다. 여기 또는 다른 곳에서 빠른 검색을 수행하면 적합한 솔루션이 반환 될 수 있습니다. 이것이 고객 용 응용 프로그램을위한 것이라면 [CSSLint] (https://github.com/CSSLint/parser-lib) – varontron

를 참조 단지 <style> 태그에 모든 포장 및 <head>

$('<style>').text(cssToAdd).appendTo('head');

에 추가 : 당신은 따옴표로 키와 값을 포장해야 할 수도 있습니다

출처

2016-09-30 00:26:55 charlietfl

Genius와 같은 라이브러리를 권하고 싶습니다. 나는 흥분과 함께 잠시 후에 돌아올 것이다. – Dom

전체 내부 대신

자바 스크립트 또는 jQuery를 사용하여 모든 HTML 요소에 CSS 추가

답변