ホームページ > 記事 > ウェブフロントエンド > JavaScript関数を使ってCSS風に追加する方法を詳しく解説 コード例
JavaScript関数を使ってCSS風に追加する方法を詳しく解説 コード例
- 伊谢尔伦オリジナル
- 2017-07-21 15:13:002571ブラウズ
最初に関数を与えます。
varaddSheet=function(){
vardoc,cssCode;
if(arguments.length==1){
doc=document;
cssCode=arguments[0]
}elseif(arguments.length==2){
doc=arguments[0];
cssCode=arguments[1];
}else{
alert("addSheet函数最多接受两个参数!");
}
if(!+"v1"){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜
vart=cssCode.match(/opacity:(d?.d+);/);
if(t!=null){
cssCode=cssCode.replace(t[0],"filter:alpha(opacity="+parseFloat(t[1])*100+")")
}
}
cssCode=cssCode+" ";//增加末尾的换行符，方便在firebug下的查看。
varheadElement=doc.getElementsByTagName("head")[0];
varstyleElements=headElement.getElementsByTagName("style");
if(styleElements.length==0){//如果不存在style元素则创建
if(doc.createStyleSheet){//ie
doc.createStyleSheet();
}else{
vartempStyleElement=doc.createElement('style');//w3c
tempStyleElement.setAttribute("type","text/css");
headElement.appendChild(tempStyleElement);
}
}
varstyleElement=styleElements[0];
varmedia=styleElement.getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){//ie
styleElement.styleSheet.cssText+=cssCode;
}elseif(doc.getBoxObjectFor){
styleElement.innerHTML+=cssCode;//火狐支持直接innerHTML添加样式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}場合によっては、.js ファイル内のドキュメントにいくつかの CSS スタイルを動的に導入する必要があります。一部の短い CSS コードの場合、これは
varddd=document.getElementById("ddd");
ddd.style.border="1pxsolidred";のようなスタイル メソッドを呼び出すことができます。それより長くても問題ありません:
varddd=document.getElementById("ddd");
ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";functionaddSheetFile(path){
varfileref=document.createElement("link")
fileref.rel="stylesheet";
fileref.type="text/css";
fileref.href=path;
fileref.media="screen";
varheadobj=document.getElementsByTagName('head')[0];
headobj.appendChild(fileref);
}この関数は IE では少し面倒です。私は常に、サポートされているブラウザのネイティブ関数を使用してきましたが、バイナリ コードを直接使用するのが最も効率的です。
varoStylesheet=document.createStyleSheet(sURL,iIndex);
createStyleSheet の 2 つのパラメータはオプションです。
しかし、スタイルが特定のページに固有で管理者のみが使用できるもので、ページのその部分が動的に生成される場合、最初から導入する必要があるでしょうか？ロードするには特別なファイルを作成する必要がありますか?最善の方法は、これらのスタイルを動的スクリプトにバンドルすることです。この機能はこの目的のために開発されました。
正直に言うと、元々はリッチテキストエディター用に開発されました。ご存知のとおり、リッチ テキスト入力ボックスを使用する最も一般的な方法は、入力するコンテンツを iframe に配置することです。これには、メイン ページのドキュメントとドキュメントの 2 種類のドキュメントが必要です。 iframe の。 iframe のドキュメントには互換性の問題もあります。
variframe=document.createElement('iframe');//編集用のリッチテキストエディタを生成します
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
...
つまり、関数の最初の決定は次のとおりです。この2つの書類が用意されています。 iframe が関与していない場合は、パラメーターを 1 つ渡すだけで済みます。最後のパラメータは常に CSS 文字列です。
次に、styleSheet 要素を動的に生成し、この要素に CSS 文字列を追加するという問題があります。もちろん、現段階で存在する場合は既製品を使用してください。 DOM 要素が増えると、ブラウザの負担も大きくなります。 document.styleSheets メソッドを考えます。これはスタイル要素やリンク要素を含むコレクションを返します。また、次のような互換性の問題も伴います。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="
<head>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>
<%#强制IE8像IE7一样呈现网页-%>
<metahttp-equiv=”X-UA-Compatible”content=”IE=EmulateIE7″/>
<%#--默认所有的链接都在本窗口打开-%>
<basetarget="_self"/>
<title><%=h(yield(:title))||controller.action_name%></title>
<%=stylesheet_link_tag"screen","button","style"%>
<linkrel="stylesheet"href="/stylesheets/print.css"type="text/css"media="print">
<!--[ifltIE8]>
<linkrel="stylesheet"href="/stylesheets/ie.css"type="text/css"media="screen">
<![endif]-->
<%=javascript_tag"window._token='#{form_authenticity_token}'"ifActionController::Base.allow_forgery_protection%>
<%=javascript_include_tag:defaults%>
<styletype="text/css"media="print"></style>
</head> 上記をテストするには、IE は 6 を返し、W3C ブラウザは 5 を返します。したがって、拒否されました。また、外部リンクではなく、style 要素のみを使用します。 2 番目の判定は、head に style 要素が存在しない場合に作成します。次に、CSS 文字列を最初のスタイル要素に追加するだけです。
次に、安全ロックを追加する必要があります。これは、media="print" の場合、定義された効果がページの印刷時にのみ有効になるためです。最初のスタイル要素のメディア値が画面と異なることを防ぐために、それを変更する必要があります。
以上がJavaScript関数を使ってCSS風に追加する方法を詳しく解説 コード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。