JavaScript関数を使ってCSS風に追加する方法を詳しく解説 コード例
最初に関数を与えます。
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7549
15
1382
52
83
11
22
90
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
