Javascriptを

Question

私はボタンが、これに類似した表示リスト内の新しいエントリを作成しようとしていて、テキストスタイルを編集する方法：私はしたい場合を除き

は

を「＃1新しい私をクリックしてください」黒いボックスに黄色のテキストとして表示するには「Click Me」をクリックし、マウスオーバー時に黒いボックスを消してテキストを茶色にしたい。私はリストを表示させることができましたが、テキストのスタイルを編集して私が望むように見えるようにする方法がわかりません。私がこれに対して与える必要があると思うコードの大部分は、次のとおりです。

var li = document.createElement("li"); 
var liBody = document.createTextNode("#"+numOfNewCMs+ 
    " new " + newClickMe); 
li.appendChild(liBody); 

次に、リストにliを挿入します。

私はnewClickMeを変数にして編集し、それをliBody変数のテキストの残りの部分に配置する必要があります。HTMLスパン要素は、スパン要素が本当に何をしているのかは分かりません。その特定の文字列のスタイルを編集するにはどうすればよいですか？私はそうするまでマウスオーバーでテキストを茶色に変える方法を（たとえできれば）調べることができません。

Answer 1

CreateTextNodeに決して会ったことはありませんが、liBody.style.fontSize="12px"が役立つはずです。 'fontWeight、color、fontStyle ...'などのその他のプロパティ

Answer 2

HTML要素には、CSSスタイルを適用するために使用できるstyleプロパティがあります。例えば

：

var newClickMe = document.createElement("span"); 
newClickMe.style.backgroundColor = "#000000"; 
newClickMe.style.color = "#FFFF00"; 
newClickMe.innerText = "Click Me"; 

var li = document.createElement("li"); 
var liText = document.createTextNode("#"+numOfNewCMs+ 
    " new "); 

li.appendChild(liText); 
li.appendChild(newClickMe); 

は、リスト項目が黄色のテキストと黒の背景を持つようになります。スタイルプロパティの詳細については

、MDNはそれに大きなセクションがあります。https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

そしてここでは、そのJavaScriptの同等にCSSプロパティを変換するための参照ページです：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

Answer 3

私はあなたを想定していますマウスオーバー時にスタイルを変更したい。私はcss '：hoverを使ってスタイルを変更しました。これはあなたが念頭に置いていたものですか？

var numOfNewCMs=1; 
 
function generateLi(){ 
 
var li = document.createElement("li"); 
 
var liBody = document.createTextNode("#"+numOfNewCMs+ 
 
    " new "); 
 
var sp = document.createElement("span"); 
 
var spBody = document.createTextNode("Click Me"); 
 
sp.setAttribute("id", "sp"+numOfNewCMs); 
 
sp.setAttribute("onmouseover", "highlight("+numOfNewCMs+")"); 
 
sp.setAttribute("onmouseout", "highlight2("+numOfNewCMs+")"); 
 
sp.style.backgroundColor='black'; 
 
sp.style.color='yellow'; 
 
sp.appendChild(spBody); 
 
li.appendChild(liBody); 
 
li.appendChild(sp); 
 
lis.appendChild(li); 
 
numOfNewCMs++; 
 
} 
 

 
function highlight(id){ 
 
var element= document.getElementById('sp'+id); 
 
element.style.backgroundColor='white'; 
 
element.style.color='brown'; 
 

 
} 
 

 
function highlight2(id){ 
 
var element= document.getElementById('sp'+id); 
 
element.style.backgroundColor='black'; 
 
element.style.color='yellow'; 
 

 
}

li{ 
 
margin-bottom:20px; 
 
} 
 

 
li > span{ 
 
padding:5px; 
 
margin-bottom:10px; 
 
} 
 

 

 
li:hover > span{ 
 
color:brown; 
 
background-color:white; 
 
}

<button onclick="generateLi()">Click me</button> 
 
<div id="lis" style="margin-top:20px;"></div>