JavaScript는 동적으로 스타일을 추가합니다(인라인/임베디드/외부 링크 등 규칙)_javascript 기술

CSS를 추가하는 방법에는 인라인, 삽입, 외부 링크 및 가져오기가 포함됩니다.
a) 스타일 시트 파일을 동적으로 도입:

코드 복사 코드는 다음과 같습니다.

function loadLink(url){
var link = document.createElement("link")
link.type = "text/css" ;
link.rel = "stylesheet";
link.href = url;
var head = document.getElmentsByTagName("head")[0]; 🎜 >}


b) 임베디드:

코드 복사 코드는 다음과 같습니다.

function insertStyles(){

var doc,cssCode=[],cssText;
var len =args.length;
var head,style,firstStyle; len == 1){
doc = 문서;
cssCode.push(arguments[0])
}else if(len == 2){
doc = 인수[0]; >cssCode.push(arguments[1]);
}else{
alert("이 함수는 최대 2개의 매개변수를 허용합니다!")
}
head = doc.getElementsByTagName("head" )[0] ;
styles= head.getElementsByTagName("style");
if(styles.length == 0){
if(doc.createStyleSheet){//ie
doc. createStyleSheet()
}else{//FF
var tempStyle = doc.createElement("style")
tempStyle.setAttibute("type","text/css")
head .appendChild(tempStyle );
}
}
firstStyle = styles[0]
cssText=cssCode.join("n")
if(! "v1"){/ /opacity 호환
var str = cssText.match(/opacity:(d?.d );/)
if(str!=null){
cssText = cssText.replace(str[0] ,"filter: alpha(opacity=" pareFloat(str[1])*100 ")");
}
}
if(firstStyle.styleSheet){
firstStyle.styleSheee.cssText = cssText;
}else if(doc.getBoxObjectFor){
firstStyle.innerHTML =
}else{
firstStyle.appendChild(doc.createTextNode(cssText))
}


c) 인라인:

코드 복사

코드는 다음과 같습니다. var addStyle=function (ele,str){ var s = ele.getAttribute("style"),styles if(str && typeof str === "string") {

if(!s){

ele.style.cssText = str
}else{
if(s == '[object]'){//IE6/7 e.getAttribute ("style")은 [객체]
s=ele.style.cssText;
}
styles= Trim(s).split(";")를 반환합니다.
for (var i=0 ,len=styles.length; ivar style_i=trim(styles[i])
var attr=style_i.split(":")[0]; (str.indexOf(attr) >-1){
styles[i]=""
}else{
styles[i]=style_i;
}
ele.style.cssText= styles.join("") ";" str;
}
}
}


d) 가져오기:
import "index .css";
CSS 클래스 운영 관련 방법:

코드 복사


코드는 다음과 같습니다.

var hasClass=function (ele,value){ var rclass = /[ntr]/g, value=" " value " " return (ele.nodeType==1 )&&(" " ele.className " ").replace(rclass," ").indexOf(value)>-1 }

var Trim=function (val){

return val. 교체(/(^s )|( s $)/g,"");
}
var addClass=function(ele,value){
var rspace = /s /,classNames,getClass;
if(value&&typeof value == = "string"){
classNames = value.split(rspace)
if(ele.nodeType === 1){
if(!ele.className && classNames.length == 1){
ele.className = value;
}else{
getClass = " " ele.className " ";for(var i=0,len=classNames .length; ivar cname=classNames[i]
if(!hasClass(ele,cname)){
getClass = cname " "; >}
ele.className = Trim(getClass);
}
}
}
}
var RemoveClass=function(ele,value){
var rclass = / [ntr]/g,classNames,getClass ;
if((value&&typeof value === "string")||value === 정의되지 않음){
classNames = (value||"").split(rspace );
if(ele.nodeType === 1 && ele.className){
if(value){//제거할 클래스가 있습니다
getClass = " " ele.className " ". replacement(rclass," ");/ / 왼쪽과 오른쪽에 공백을 두어 클래스의 범주를 동일하게 만들고 후속 교체를 용이하게 합니다.
for(var i=0,len=classNames.length; igetClass = getClass.replace(" " classNames[i] " "," ")
}
ele.className=trim(getClass)
}else{//모든 클래스 제거 존재하지 않는 경우
ele.className = "";
}
}
}
}
varggleClass=function(ele,value){
if(typeof value === "string"){
if(hasClass (ele,value)){
removeClass(ele,value)
}else{
addClass(ele,value); >}
}
}