0
スタイルシートを変更することに関するjqueryが、どのようにバニラのjavascriptでそれを行うのかを理解することによってどのように動作するのか理解しようとしていますが、私が見つけることができるテーマには多くのリソースはありません。私はすでにその件に関するフローページ上のスタックをチェックしましたが、私が間違っていることを理解することはできません。document.stylesheetsを使用しようとしていないのはなぜですか？
私はスクリプトタグでhtmlページではJavaScriptを使用して、
HTMLページを簡単なHTMLページとシンプルなスタイルシートを持って
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="parent"></div>
<script>
let parent=document.getElementsByClassName('parent')[0];
for(let i=0; i<10;i++){
let child=document.createElement('div');
let id= "i"+ i.toString();
child.setAttribute("id",id);
parent.appendChild(child);
}
</script>
</body>
</html>
スタイルシート
body{
background-color: lightblue;
}
.parent{
display:flex;
flex-wrap: wrap;
flex-direction: column;
}
.parent div{
margin: 5px;
width: 50px;
height: 50px;
background-color: white;
}
コンソールコマンド
私がスタイルシートオブジェクトをプルアップするとき、 console私はオブジェクトを別名スタイルシートにしますが、cssRulesプロパティはnullに設定されています。その中のスタイルシートにはルールはありません。私はなぜこれが何であるか把握できません。例えば
は
document.styleSheets //returns StyleSheetList {0: CSSStyleSheet, length: 1}
document.styleSheets[0] /*returns CSSStyleSheet {ownerRule: null, cssRules:
null, rules: null, type: "text/css", href:
"file:///C:/Users/brand/Documents/test/main.css"…}*/
再生できません、私のためにうまく動作します。 –
実際には：Firefoxは常にファイルがfile：///経由で開かれている場合は実際には表示されませんが、Webサーバーを経由して開く必要があります。 –
@ChrisG、回答として投稿できます。したがって、オフラインテストでは、XAMP、Wamp ...などのインストールが必要になります。 – sinisake