자바 스크립트를 통해 페이지에 CSS를 동적으로 추가

자바 스크립트를 통해 페이지에 CSS를 동적으로 추가

---

외부 웹 사이트에 추가 할 위젯을 만들고 있으며 CSS를 생성하여 스타일 (텍스트 색상, 배경색, 글꼴 크기 등)을 생성하는 페이지를 만들었습니다. 나는 그들이 그들의 웹 사이트에 복사 / 붙여 넣기 할 수 있도록 CSS로 채워진 텍스트 영역으로 끝납니다.

실시간 미리보기를 위해이 CSS를 현재 페이지에 추가하는 방법이 있습니까?

---

CSS 텍스트를 추가하려면

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'content';
document.getElementsByTagName('head')[0].appendChild(style);

css 파일을 추가하려면

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'css/my.css');
document.getElementsByTagName('head')[0].appendChild(link);

---

나는 전통적으로 <style>요소를 할 때 블록을 추가했습니다 .

var style_rules = [];

style_rules.push("#" + myElemId + " { /* Rules */ } ");
/* ... */

var style = '<style type="text/css">' + style_rules.join("\n") + "</style>";
$("head").append(style);

주목해야 할 중요한 점은 기존 스타일이 무엇인지 또는 id페이지에서 충돌 할 수 있는 것이 무엇인지 모르기 때문에 JavaScript 애플리케이션 내에서 ID를 추적 한 다음이를 사용하여 채우는 것이 매우 유용하다는 것입니다. 주입 된 <style>블록. 또한의 일반적인 이름 있도록 접두사 기능을 통해 내 이름을 실행하는 경향 wrapper, 그리고 unit그들은 같은으로 전환된다 (충돌하지 않는 myunique_wrapper및 myunique_unit.

기본 CSS 재설정을 통합하는 것은 #myWrapper {margin: 0; padding: 0}사용자 정의 스타일을 구축하기위한 적절한 시작 플랫폼이 될 수 있습니다.

귀하의 고유 한 사례, 말하자면 실시간 미리보기를 해결하기 위해 표준 요소로 div를 지정합니다. 그런 다음 "업데이트"를 클릭하면 규칙을 읽고 헤드에 추가합니다. 과거 규칙의 잔여 효과를 무효화하려면 마지막 <style>요소를 제거 하거나 <style>요소에 ID를 부여하는 것이 좋습니다 . 그런 종류의 선택이 효과가 있을지 모르겠지만 그래야합니다.

---

var element = document.createElement('style');
element.setAttribute('type', 'text/css');

if ('textContent' in element) {
  element.textContent = css;
} else {
  element.styleSheet.cssText = css;
}

document.getElementsByTagName('head')[0].appendChild(element);

---

style텍스트 영역의 내용이 포함 된 태그를 DOM에 추가 할 수 있습니까 ? 나중에 변경할 수 있도록 ID를 제공 할 수 있습니다.

---

웹 / 자바 스크립트 개발을 위해 괜찮은 프레임 워크를 사용하는 것이 좋습니다. 개인적으로 jQuery를 사용하겠습니다.

http://api.jquery.com/css/

여기에는 요소에 대한 CSS 속성을 빠르게 설정하는 방법을 보여주는 몇 가지 코드 조각이 있습니다.

참고 URL : https://stackoverflow.com/questions/4847313/dynamically-add-css-to-page-via-javascript