ホームページ >ウェブフロントエンド >フロントエンドQ&A >js が CSS を制御する方法
#この記事の動作環境: Windows7 システム、javascript1.8.5&&CSS3 バージョン、DELL G3 コンピューターjs で CSS を制御する方法: 1. style 属性または "setAttribute()" を使用してスタイルを変更します; 2. 疑似クラス "(after, before)" の "content" コンテンツを変更します; 3 . クラス名を変更することでスタイルなどを変更します。
JS の制御方法css?
JS で CSS スタイルを制御するいくつかの方法
JS の仕事や研究をしていると、動的にロードするのが簡単ではない状況に常に遭遇します。 style 属性を使用した CSS スタイル (例: 疑似クラス スタイル コントロール、アニメーション スタイル コントロール)、ここでは、js でスタイルを変更するいくつかの方法の概要を示します: 1、スタイルを使用してスタイルを変更します。属性または setAttribute()ele.style.width='50px';//最常用 ele.style.cssText='width:50px';//并不会覆盖原先所有css ele.style.setProperty("width", "50px", "important");//可以传第三个参数 ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用
ele.style.width='50px';//最常用 ele.style.cssText='width:50px';//并不会覆盖原先所有css ele.style.setProperty("width", "50px", "important");//可以传第三个参数 ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用2、疑似クラスの内容 (後、前) を変更するだけの場合は、これも行うことができます。
//css代码 div::after{ content:attr(data-myadd); width:10px; } //js代码 div.setAttribute('data-myadd',需要动态加载的内容)
//css代码 div::after{ content:attr(data-myadd); width:10px; } //js代码 div.setAttribute('data-myadd',需要动态加载的内容)3、スタイルを変更するには、クラス名
ele.className=''; ele.classList.add();//emmmm没什么好说的
ele.className=''; ele.classList.add();//emmmm没什么好说的4 の場合、重要なポイントは次のとおりです: document.styleSheets を使用してすべてのスタイル シートを取得し、スタイル シートを選択して、insertRule を通じてスタイルを追加します。また、新しい cssRule を作成してスタイルを追加することもできます。 addRule() を通して
document.styleSheets:获取到的是所有样式列表的集合 href:通过link标签引入的样式表,则是样式表的URL,否则为null media:当前样式表支持的所有媒体类型集合 type:样式表类型的字符串 disabled: 通过disabled来屏蔽掉该样式表,可以用来切换样式表 ; document.styleSheets[i].disabled = true cssRules:是当前样式列表的所有样式集合;document.styleSheets[i].cssRules cssText:当前样式表的某一个样式的样式document.styleSheets[i].cssRules[i].cssText selectorText:当前样式的选择符 parentStyleSheet:当前规则所属样式表;IE不支持 insertRule(rule,index):在index前插入一条rule新规则; document.styleSheets[0].insertRule('* {background:blue;color:#000}',0)不支持IE;document.styleSheets[0].addRule('*',' {background:blue;color:#000}',0)支持IE; deleteRule(index):删除某个央视列表的第index个样式;IE用removeRule(index) //使用document.styleSheets获取样式表的时候最好获取最后一个,在最后一个样式表上添加样式 var sheets=document.styleSheets; var lastSheet=sheets[sheets.length-1]; lastSheet.insertRule('#div{width:10px}',index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器 lastSheet.addRule('div','width:10px;',0)//IE浏览器
//使用document.styleSheets获取样式表的时候最好获取最后一个,在最后一个样式表上添加样式 var sheets=document.styleSheets; var lastSheet=sheets[sheets.length-1]; lastSheet.insertRule('#div{width:10px}',index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器 lastSheet.addRule('div','width:10px;',0)//IE浏览器5、スタイル テーブルを動的にロードします変更する必要があるスタイルが多数ある場合は、スタイルを動的にロードしてページ スタイルを変更することをお勧めします
//改变样式文件的引用 function loadStyle(url){ var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); } loadStyle('test.css'); //动态加载css代码片段 var style = document.createElement('style'); style.type = 'text/css'; style.rel = 'stylesheet'; try{ //Chrome Firefox Opera Safari style .appendChild(document.createTextNode(code)); }catch(ex){//IE style.styleSheet.cssText = code; } var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } loadCssCode('body{background-color:#f00}');
//改变样式文件的引用 function loadStyle(url){ var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); } loadStyle('test.css'); //动态加载css代码片段 var style = document.createElement('style'); style.type = 'text/css'; style.rel = 'stylesheet'; try{ //Chrome Firefox Opera Safari style .appendChild(document.createTextNode(code)); }catch(ex){//IE style.styleSheet.cssText = code; } var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } loadCssCode('body{background-color:#f00}');推奨学習: 「
JavaScript 上級チュートリアル 」
以上がjs が CSS を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。