javascript_javascript 팁을 사용하여 스타일 삽입-JS 튜토리얼-php.cn

1. 자바스크립트를 사용하여 때때로 우리는 페이지의 스타일 태그에 CSS 코드를 동적으로 생성하기 위해 js를 사용해야 합니다. 즉, 직접 스타일 요소를 생성한 다음 스타일 요소에 CSS 코드를 설정하고 마지막으로 이를 삽입합니다. 머리 요소. 하지만 해결해야 할 몇 가지 호환성 문제가 있습니다. 우선, w3c 표준을 준수하는 브라우저에서는 스타일 요소에 텍스트 노드로 삽입할 CSS 코드만 삽입하면 됩니다. IE에서는 스타일 요소의 styleSheet.cssText를 사용하여 문제를 해결해야 합니다. 문제.

또한 IE의 일부 버전에서는 페이지의 스타일 태그 수가 제한되어 있으므로 이를 초과하면 오류가 보고됩니다.

function addCSS(cssText){ var style = document.createElement('style'), //创建一个style元素 head = document.head || document.getElementsByTagName('head')[0]; //获取head元素 style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用 if(style.styleSheet){ //IE var func = function(){ try{ //防止IE中stylesheet数量超过限制而发生错误 style.styleSheet.cssText = cssText; }catch(e){

} } //如果当前styleSheet还不能用，则放到异步中则行 if(style.styleSheet.disabled){ setTimeout(func,10); }else{ func(); } }else{ //w3c //w3c浏览器中只要创建文本节点插入到style元素中就行了 var textNode = document.createTextNode(cssText); style.appendChild(textNode); } head.appendChild(style); //把创建的style元素插入到head中 }

//使用 addCSS('#demo{ height: 30px; background:#f00;}'); 로그인 후 복사 물론 이는 가장 기본적인 시연 방법일 뿐이며 실제 적용 시에는 개선이 필요합니다. 예를 들어 매번 생성되는 CSS 코드를 스타일 요소에 삽입하여 스타일시트 수가 초과되지 않도록 하세요. IE의 제한이 잘못되었습니다.

패키지:

코드 복사 코드는 다음과 같습니다. var importStyle=function importStyle(b){var a= document.createElement ("스타일"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild (c. createTextNode(b))}}; importStyle('h1 { background: red; }');// 호출

seajs 패키지

코드 복사 코드는 다음과 같습니다. seajs.importStyle=function importStyle(b){var a =document.createElement("스타일"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a. AppendChild(c .createTextNode(b))}}; 2. JavaScript 삽입 외부 스타일 파일을 도입하려면 태그를 사용하세요. 이는 비교적 간단하며 주요 브라우저와 호환성 문제가 없습니다.

function includeLinkStyle(url) { var link = document.createElement(“link”); link.rel = “stylesheet”; link.type = “text/css”; link.href = url; document.getElementsByTagName(“head”)[0].appendChild(link); }

includeLinkStyle(“http://css.xxx.com/home/css/reset.css?v=20101227”); 로그인 후 복사 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.