JavaScript が動的にスタイルを追加 (インライン/埋め込み/外部リンクなどのルール)_JavaScript スキル

CSS を追加する方法には、インライン、埋め込み、外部リンク、インポートなどがあります。
a) スタイル シート ファイルを動的に導入します:

コードをコピー コードは次のとおりです。

functionloadLink(url){
var link = document.createElement("link");
link.type = "text/css" ;
link.rel = "スタイルシート";
link.href = url;
var head = document.getElmentsByTagName("head");
head.appendChild(link); 🎜 >}

b) 埋め込み:

コードをコピー コードは次のとおりです:

関数 insertStyles(){
var doc,cssCode=[],cssText;
var head,style,firstStyle; len == 1){
doc = ドキュメント;
cssCode.push(arguments[0])
}else if(len == 2){
doc = argument[0]; >cssCode.push(arguments[1]);
}else{
alert("関数は最大 2 つのパラメータを受け取ります!");
}
head = doc.getElementsByTagName("head") )[0] ;
styles= head.getElementsByTagName("style");
if(styles.length == 0){
if(doc.createStyleSheet){//つまり
doc. createStyleSheet();
}else{//FF
var tempStyle = doc.createElement("style");
tempStyle.setAttibute("type","text/css"); .appendChild(tempStyle );
}
}
firstStyle =styles[0];
if(! "v1"); /opacity 互換
var str = cssText.match(/opacity:(d?.d );/);
if(str!=null){
cssText = cssText.replace(str[0] ,"フィルター: alpha(opacity=" pareFloat(str[1])*100 ")");
}
}
if(firstStyle.styleSheet){
firstStyle.styleSheee.cssText = cssText;
}else if(doc.getBoxObjectFor){
firstStyle.innerHTML = cssText;
}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 ("スタイル") は [オブジェクト]

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("") ";"
}
}
}


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. replace(/(^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;
getClass = " " ele.className " "; .length; ivar cname=classNames[i]
if(!hasClass(ele,cname)){
getClass = cname " "; >}
ele.className = トリム(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 " "。 replace(rclass," ");/ / クラス内のカテゴリを等しくするために左右にスペースを入れ、その後の置換を容易にします。
for(var i=0,len=classNames.length; igetClass = getClass.replace(" " classNames[i] " "," ")
}
ele.className=trim(getClass)
}else{//すべてのクラスを削除します存在しない場合
ele.className = "";
}
}
}
var toggleClass=function(ele,value){
if(typeof value === "string"){
if(hasClass (ele,value)){
removeClass(ele,value)
}else{
addClass(ele,value); >}
}
}