JavaScriptを使用してCSSスタイルシートを作成する

Question

javascriptを使用してCSSスタイルシートを作成しようとしています。コードは

<script type="text/javascript"> 
function colorSquare() 
{ 
var elem = document.getElementById("body"); 
document.getElementById("body").innerHTML = "<style>"; 
document.getElementById("body").innerHTML += ".myAnimation"; 
document.getElementById("body").innerHTML += "{"; 
document.getElementById("body").innerHTML += "width: 50px"; 
document.getElementById("body").innerHTML += "height: 50px"; 
document.getElementById("body").innerHTML += "position: absolute;"; 
document.getElementById("body").innerHTML += "background: #0000FF;"; 
document.getElementById("body").innerHTML += "background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FmZTBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNjQ1NGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=)" 
document.getElementById("body").innerHTML += "background: -moz-radial-gradient(center, ellipse cover, #0000FF 0%, #0000FF 0%, #ff0000 100%);"; 
document.getElementById("body").innerHTML += "background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0000FF), color-stop(0%,#ff0000), color-stop(100%,#ff0000));"; 
document.getElementById("body").innerHTML += "background: -webkit-radial-gradient(center, ellipse cover, #0000FF 0%,#0000FF 0%,#ff0000 100%);"; 
document.getElementById("body").innerHTML += "background: -o-radial-gradient(center, ellipse cover, #0000FF 0%,#0000FF 0%,#ff0000 100%);"; 
document.getElementById("body").innerHTML += "background: -ms-radial-gradient(center, ellipse cover, #0000FF 0%,#0000FF 0%,#ff0000 100%);"; 
document.getElementById("body").innerHTML += "background: radial-gradient(ellipse at center, #0000FF 0%,#0000FF 0%,#ff0000 100%)"; 
document.getElementById("body").innerHTML += "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000FF', endColorstr='#ff0000',GradientType=1);"; 
document.getElementById("body").innerHTML += "border-style: solid;"; 
document.getElementById("body").innerHTML += "border-width: 3px;"; 
document.getElementById("body").innerHTML += "border-color:#77dd77;"; 
document.getElementById("body").innerHTML += "border-radius: 5px;"; 
document.getElementById("body").innerHTML += "-webkit-box-shadow:0 0 10px black;"; 
document.getElementById("body").innerHTML += "-moz-box-shadow: 0 0 10px black;"; 
document.getElementById("body").innerHTML += "box-shadow:0 0 10px black;"; 
document.getElementById("body").innerHTML += "text-align: white;"; 
document.getElementById("body").innerHTML += "text-align: center;"; 
document.getElementById("body").innerHTML += "line-height: 45px;"; 
document.getElementById("body").innerHTML += "</style>}"; 

} 
</script> 

私はこれを正しくやっていますか？ CSSスタイルシートを作成するためにjavascriptを使用する正しい方法は何ですか？

おかげで、

イザヤ

Answer 1

あなたのコードが動作しているかもしれませんが（テストなしではわかりませんが）、頭がおかしくなります。本当にCSSを頭に入れてください。

あなたはnewCSS変数に多くのスタイルを追加することができます。これは、コードが目にはよりよく見えるようになりますが、コードの行数が少なくても機能が向上することを意味します。

// add your styles here 
var newCSS = '.myAnimation { width: 50px; }'; 
var head = document.head || document.getElementsByTagName('head')[0]; 
var style = document.createElement('style'); 

style.type = 'text/css'; 
if (style.styleSheet){ 
    style.styleSheet.cssText = css; 
} else { 
    style.appendChild(document.createTextNode(css)); 
} 

head.appendChild(style); 

Answer 2

あなたがaphroditeを使用することができます。これは、React用に作成されたインラインスタイルシートライブラリですが、Reactは必要ありません。

Answer 3

私は間違っていると言います。 JavaScriptで直接スタイリングするのではなく、JavaScriptでHTMLに<style>要素を作成し、HTML要素のスタイルを変更するためにテキストを追加することです。

要素にはstyleという属性があり、JavaScriptで取り出すことができます。

スタイルIDに関して要素：あなたがhomeのidを持つ要素を持っている、とあなたが赤に背景色を設定したい場合は

は、あなたがこのようにそれを行うだろう。

タグに関して

document.getElementById("home").style.backgroundColor = "red";

スタイル要素：

でgetElementByIdを使用する代わりに、getElementsByTagNameを使用して、要素の配列を返します。

あなたが青の色を持っている第五<p>をしたい場合、あなたはこのようにそれを行うだろう：あなたは、単にループにそれを置くことができるすべての<p>にそれをしたい場合は

document.getElementsByTagName("p")[4].style.color = "blue";

：クラスに関して

var a = document.getElementsByTagName("p"); 
for(var i = 0; i < a.length; i++) { 
    a[i].style.color = "blue"; 
} 

スタイル要素：

上記とまったく同じですが、getElementsByTagNameの代わりにgetElementsByClassNameを使用してください。

例：document.getElementsByClassName("slogan")[0].innerHTML = "hello";

サイドノート：

ライティングdocument.getElementByIdと経由で他のユーザーと何度も何度も非常に反復取得します。

function tag(string) { 
    return document.getElementsByTagName(string); 
} 

function c(string) { 
    return document.getElementsByClassName(string); 
} 

function id(string) { 
    return document.getElementById(string); 
} 

と、この代わりのように書く：：私はそれを得ることはありません

id("home").style.backgroundColor = "red"; 

tag("p")[4].style.color = "blue"; 

c("slogan")[0].innerHTML = "hello";