✍ 📁 🙈 🙉 🙊

setAttribute

element.setAttribute(name, value)
設置指定元素上的一個屬性值。

<div id="Mdiv">
<div id="div">   
<<c>div id="<span id="id1"></span>" > change this Attribute<<c>/div> 
<br><br>

<span id="id2"></span>.setAttribute("id" , "<input id="idInput" type="text" value = "div" onchange="Change()" onmouseover="this.select()" >  ")  
<br><br>
<span id="id3"></span>.setAttribute("style" , "color :<select id="Cinput" onchange="Change()" style="width:100px" >                    
<option value="black">black</OPTION>               
<option value="blue">blue</OPTION>               
<option value="lime">lime</OPTION>                 
<option value="goldenrod">goldenrod</OPTION> 
<option value="red">red</OPTION></SELECT>")

<br><br>
<span id="id4"></span>.setAttribute("style" , "font-size :               <select id="Finput" onchange="Change()" style="width:100px" >                           <option value="20px">16px</OPTION>                      
<option value="25px">20px</OPTION>                      
<option value="30px">25px</OPTION>
</SELECT>")    
   </div></div>

Edit

#html #網頁格式 #style #script setAttribute() #script setAttribute() 添加指定的属性

createElement()

createElement() 創建元素

<pre><b>createElement() 創建元素</b>
document.createElement() 創建一個元素。
      例 : document.createElement("div")
           document.createElement("P")
           document.createElement("input") .......等等

document.createElement()          可以建立一個新的元素。
document.createTextNode()         就是用來建立文字節點的方法。
document.createDocumentFragment() 一開始我們有一個 HTML 的容器元素。

Node.appendChild()   方法在節點的子節點<r>列表末</r>新增新的子節點。
Node.insertBefore()  方法在節點的子節點列表任意位置<r>插入</r>新的節點。
Node.removeChild()   方法從 DOM 移除一個子節點，並返回<r>移除</r>的節點。
Node.replaceChild()  實現子節點(對像)的替換。返回被<r>替換</r>對像的引用。
Node.hasChildNodes() 取得值，指出這個節點<r>是否有子節點</r>。
</pre>

<b>Node.appendChild( )<br>
用來新增一個子節點到指定元素節點的最後面</b>
<pre>
   Node.appendChild(child) : child 為另一個元素物件。

var newDiv = document.createElement("div");
 var newT = document.createTextNode("<<?>div>New div<<?>/div>"); 
     newDiv.appendChild(newT);
     <r>document.body</r>.appendChild(newDiv, div1);

//<r>document.body</r> 內加入新 div

</pre>

<button  onclick="myFunction()">Node.appendChild()</button>
<div id="DP">
<div id="div1" ><<?>div id="div1"><<?>/div></div>
</div>

}
</script>

<b>Node.appendChild( )<br>
用來新增一個子節點到指定元素節點的最後面</b>
<pre>

var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hi"); 
        newDiv.appendChild(newContent);
        <r>div1</r>.appendChild(newDiv, div1);

//<r>div1</r> 內加入新 div

</pre>

<button  onclick="myFunction()">Node.appendChild()</button>
<div id="div1" ><<c>div id="<r>div1</r>">

</div>
<<c>/div>

<b>Node.insertBefore()<br>
插入新的子代 (child) 元素。</b>
<pre>  parentNode.insertBefore(插入的新元素, 之前的元素物件);

<<c>ol id="myList">
    <<c>li>Coffee<<c>/li>
    <<c>li>Tea<<c>/li>
<<c>/ol>

var newNode = document.createElement("li");
    var textNode = document.createTextNode("new li");
        newNode.appendChild(textNode);
        myList.insertBefore(newNode, myList.children[1]);
</pre>

<button  onclick="myFunction()">insertBefore()</button>
<ol id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ol>

<b>Node.removeChild() <br>
移除一個子節點，並傳回移除的節點。</b>
<pre><<?>div id="Mid">
<<?>button onclick="remove(this)"> 1 remove me <<?>/button>
<<?>button onclick="remove(this)"> 2 remove me <<?>/button>
<<?>button onclick="remove(this)"> 3 remove me <<?>/button>
<<?>button onclick="remove(this)"> 4 remove me <<?>/button>
<<?>button onclick="remove(this)"> 5 remove me <<?>/button>
<<?>/div>

<<c>script>
function remove(x) { Mid.removeChild(x) }
<<c>/script>

</pre>

<div id="Mid">
<button onclick="remove(this)"> 1 remove me </button>
<button onclick="remove(this)"> 2 remove me </button>
<button onclick="remove(this)"> 3 remove me </button>
<button onclick="remove(this)"> 4 remove me </button>
<button onclick="remove(this)"> 5 remove me </button>
</div>

<B>node.replaceChild( newChild, oldChild )<br>
   取代 元素  </B>
<pre>     newChild 為要加進去的子代元素，
     oldChild 為要換掉的的子代元素。

例: <<?>input id="input_DP" type="text" value="input tag" />

var textarea =document.createElement('textarea') ;
      textarea.innerHTML = "textarea tag";
      textarea.id="textarea_ID" ;
      input_DP.parentNode.replaceChild(textarea , input_DP)

</pre>

}
</script>

#B4 { height:30px ; width:100px ;
      font-size: 16px ;
      cursor: pointer ;
      color: black;
      background-color: lightgray ;
      border-radius: 8px ;
      box-shadow: 4px 4px #999 ;}

#B4:hover { background-color: gainsboro ;}

#B4:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

</style>

Edit

#html #網頁格式 #style #div #createElement() 創建元素 #Node.removeChild() #Node.insertBefore() #Node.appendChild( ) #createElement()

parentElement children

children 子元素 / parentElement 父元素

<pre><b>nodeObject.children 子元素</b>
<<c>div id="Mdiv">
       <<c>div> 111 <<c>/div>
       <<c>a>   222 <<c>/a>
       <<c>h1>  333 <<c>/h1>
       <<c>p>   444 <<c>/p>
<<c>/div>

</pre>

</script>

<pre><b>nodeObject.parentElement 父元素</b>
<<c>div id="Mdiv">
       <<c>div id="div"> 111 
              <<c>a   id="a">   222 <<c>/a>
              <<c>h1  id="h1">  333 <<c>/h1>
       <<c>/div>
       <<c>p id="P">   444 <<c>/p>
<<c>/div>

</pre>

dp.innerHTML =txt;

</script>

Edit

#html #網頁格式 #style #div #script parentElement #script children #script parentElement 父元素 #script children 子元素 #script nodeObject.parentElement #script nodeObject.children

blur focus

focus() / blur()

<b>jquery focus()</b>
<pre>  <<c>input type="type" value="⇦ blur" />
<<c>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"><<c>/script>
<<c>script>
$(document).ready(function(){
    $("input").mouseover(function(){ $("input").focus(); 
                                     $("input").val("focus"); });

$("input").mouseout(function() { $("input").blur(); 
                                     $("input").val("blur"); });
});          
<<c>/script>
</pre>
<input type="type" value="⇦ blur" />

$("input").mouseout(function() { $("input").blur(); 
                                     $("input").val("blur"); });
}); 
</script>

#www{font-size: 30px ;word-wrap:break-word;}
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>

Edit

#html #網頁格式 #style #div #script focus() #script blur() #script 獲得焦點 #script 失去焦點

JavaScript Array

JavaScript Array JSON
JSON.stringify(JSON) / Object.keys( ) / Object.values( )

<pre><p id="demo"></p></pre>
<script>
var text = '[{ "aa":"00" , "bb":"00000" },{ "aa":"11" , "bb":"11111" },{ "aa":"22" , "bb":"22222" } ]';

var parse= JSON.parse(text);
var stringify= JSON.stringify(text);

txt += "\n\n var parse= JSON.parse(text) ;"
txt += "\n var stringify= JSON.stringify(text) ;"
txt += "\n\n typeof text  = " + typeof text ;
txt += "\n typeof parse = " + typeof parse;
txt += "\n typeof stringify = " + typeof stringify;

txt += "\n\n parse = " + parse ; 
txt += "\n stringify = " + stringify;

txt += "\n\n JSON.stringify(parse)= " + JSON.stringify(parse );

txt += "\n\n JSON.stringify(parse, null , 2)= " + JSON.stringify(parse, null , 2);

txt += "\n\n JSON.stringify(parse, ['aa'],2)= " + 
             JSON.stringify(parse, ['aa'],2);

txt += "\n\n JSON.stringify(parse, ['bb'],2)= " + 
             JSON.stringify(parse, ['bb'],2);

//toString

txt +="<br><br><br><br><br>";
//txt += "JSON.stringify(obj) = " +JSON.stringify(obj)+ "<br><br>";

//txt += "JSON.parse(text) = "+ JSON.parse(text) + "<br><br>";
//txt += "obj  = "+ obj  + "<br><br>";

//txt += "obj.length = " + obj.length + "<br><br>";

//for(var x=0 ; x < parse.length; x++){
//  txt += "obj[parse].aa = "+obj[parse].aa+ '    ';
 // txt += "obj[parse].bb= " +obj[parse].bb+ "<br>"; }

document.getElementById("demo").innerHTML = txt
</script>

<pre><p id="demo"></p></pre>
<script>
var text = '[{ "aa":"00" , "bb":"00000" },{ "aa":"11" , "bb":"11111" },{ "aa":"22" , "bb":"22222" } ]';

var parse= JSON.parse(text);
var stringify= JSON.stringify(text);

txt += "\n\n var parse= JSON.parse(text) ;"
txt += "\n var stringify= JSON.stringify(text) ;"
txt += "\n\n typeof text  = " + typeof text ;
txt += "\n\n typeof parse = " + typeof parse;
txt += "\n\n typeof stringify = " + typeof stringify;

txt += "\n\n parse = " + parse ; 
txt += "\n stringify = " + stringify;

txt += "\n\n JSON.stringify(parse)= " + JSON.stringify(parse );

txt += "\n\n JSON.stringify(parse, null , 2)= " + JSON.stringify(parse, null , 2);

txt += "\n\n JSON.stringify(parse, ['aa'],2)= " + 
             JSON.stringify(parse, ['aa'],2);

txt += "\n\n JSON.stringify(parse, ['bb'],2)= " + 
             JSON.stringify(parse, ['bb'],2);

//toString

txt +="<br><br><br><br><br>";
//txt += "JSON.stringify(obj) = " +JSON.stringify(obj)+ "<br><br>";

//txt += "JSON.parse(text) = "+ JSON.parse(text) + "<br><br>";
//txt += "obj  = "+ obj  + "<br><br>";

//txt += "obj.length = " + obj.length + "<br><br>";

//for(var x=0 ; x < parse.length; x++){
//  txt += "obj[parse].aa = "+obj[parse].aa+ '    ';
 // txt += "obj[parse].bb= " +obj[parse].bb+ "<br>"; }

document.getElementById("demo").innerHTML = txt
</script>

<pre>
var D1 =  {"中文":[{item: "橙子" , Qty: 31 , from: "香港"} ,
                  {item: "蘋果" , Qty: 12 , from: "中國"} ,
                  {item: "檸檬" , Qty: 32 , from: "美國"} ,
                  {item: "芒果" , Qty: 22 , from: "日本"}],
           "英文":[{item: "orange" , Qty: 31 , from: "HK"} ,
                  {item: "apple" , Qty: 12 , from: "China"} ,
                  {item: "lemon" , Qty: 32 , from: "US"} ,
                  {item: "mango" , Qty: 22 , from: "Japan"}]   }

txt += "</r>\n\nD1 ☛ "    + D1 ;
txt += "\nD1.length ☛ "    + D1.length ;

txt += "\nObject.keys(D1) ☛ "    + Object.keys(D1) ;
txt += "\nObject.keys(D1).length ☛ "    + Object.keys(D1).length ;
txt += "\nObject.keys(D1)[0] ☛" + Object.keys(D1)[0] ; 
txt += "\nObject.keys(D1)[1] ☛" + Object.keys(D1)[1] ;
txt += "\nObject.keys(D1.中文).length ☛" + Object.keys(D1.中文).length ;
txt += "\nObject.keys(D1.英文).length ☛" + Object.keys(D1.英文).length ;
txt += "\n\nJSON.stringify(Object.keys(D1)) ☟\n" + 
        JSON.stringify(Object.keys(D1)) ;

txt += "\n\nObject.values(D1).length ☛" + Object.values(D1).length ;
txt += "\n\nJSON.stringify(Object.values(D1)[0]) ☟\n" + 
        JSON.stringify(Object.values(D1)[0]) ;
txt += "\n\nJSON.stringify(Object.values(D1)[1]) ☟\n" + 
        JSON.stringify(Object.values(D1)[1]) ;
txt += "\n\nJSON.stringify(Object.values(D1)) ☟\n" + 
        JSON.stringify(Object.values(D1)) ;

txt += "\n\nJSON.stringify(D1)  ☟\n" + 
JSON.stringify(D1);

txt += "\n\nJSON.stringify(Object.values(D1)[0] ) ☟\n" + JSON.stringify(Object.values(D1)[0] );

txt += "\n\nJSON.stringify(Object.values(D1)[1] ) ☟\n" + JSON.stringify(Object.values(D1)[1] );

txt += "\n\nD1.中文[0].item=" + D1.中文[0].item ;
txt += "  D1.中文[0].Qty=" + D1.中文[0].Qty ;  
txt += "  D1.中文[0].from="+ D1.中文[0].from ;

txt += "\nD1.中文[1].item=" + D1.中文[1].item ;
txt += "  D1.中文[1].Qty=" + D1.中文[1].Qty ;  
txt += "  D1.中文[1].from="+ D1.中文[1].from ;

txt += "\nD1.中文[2].item=" + D1.中文[2].item ;
txt += "  D1.中文[2].Qty=" + D1.中文[2].Qty ;  
txt += "  D1.中文[2].from="+ D1.中文[2].from ;

txt += "\nD1.中文[3].item=" + D1.中文[3].item ;
txt += "  D1.中文[3].Qty=" + D1.中文[3].Qty ;  
txt += "  D1.中文[3].from="+ D1.中文[3].from ;

txt += "\n\nD1.英文[0].item=" + D1.英文[0].item ;
txt += "  D1.英文[0].Qty=" + D1.英文[0].Qty ;  
txt += "  D1.英文[0].from="+ D1.英文[0].from ;

txt += "\nD1.英文[1].item=" + D1.英文[1].item ;
txt += "  D1.英文[1].Qty=" + D1.英文[1].Qty ;  
txt += "  D1.英文[1].from="+ D1.英文[1].from ;

txt += "\nD1.英文[2].item=" + D1.英文[2].item ;
txt += "  D1.英文[2].Qty=" + D1.英文[2].Qty ;  
txt += "  D1.英文[2].from="+ D1.英文[2].from ;

txt += "\nD1.英文[3].item=" + D1.英文[3].item ;
txt += "  D1.英文[3].Qty=" + D1.英文[3].Qty ;  
txt += "  D1.英文[3].from="+ D1.英文[3].from ;

demo.innerHTML = txt; 
</script>
<style>
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
r{font-size:20px;color:red;}

</style>

var Tt= '' ;

Tt += 'var Ay = ' + JSON.stringify(Ay) ;

Tt += '\n\nAy.length = ' + Ay.length ;
Tt += '\nAy = ' + Ay
Tt += '\nJSON.stringify(Ay) = ' + JSON.stringify(Ay) ;

Tt += '\n\nObject.keys(Ay).length = ' + Object.keys(Ay).length ; 
Tt += '<br>Object.keys(Ay[0]).length = ' + Object.keys(Ay[0]).length ; 
Tt += '<br>Object.keys(Ay[1]).length = ' + Object.keys(Ay[1]).length ; 
Tt += '<br>Object.keys(Ay[2]).length = ' + Object.keys(Ay[2]).length ;  
Tt += '\nJSON.stringify(Object.keys(Ay))    = ' + 
          JSON.stringify(Object.keys(Ay)) ;
Tt += '\nJSON.stringify(Object.keys(Ay[0])) = ' + 
          JSON.stringify(Object.keys(Ay[0])) ;
Tt += '\nJSON.stringify(Object.keys(Ay[1])) = ' + 
          JSON.stringify(Object.keys(Ay[1])) ;
Tt += '\nJSON.stringify(Object.keys(Ay[2])) = ' + 
          JSON.stringify(Object.keys(Ay[2])) ;

Tt += '<br><br>Object.values(Ay).length = ' + Object.values(Ay).length ; 
Tt += '<br>Object.values(Ay[0]) = ' + Object.values(Ay[0]) ; Tt += '<br>Object.values(Ay[1]) = ' + Object.values(Ay[1]) ; Tt += '<br>Object.values(Ay[2]) = ' + Object.values(Ay[2]) ;

Tt += '\n\nJSON.stringify(Object.values(Ay))    ☟\n' + 
          JSON.stringify(Object.values(Ay)) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[0])) ☟\n' + 
          JSON.stringify(Object.values(Ay[0])) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[1])) ☟\n ' + 
          JSON.stringify(Object.values(Ay[1])) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[2])) ☟\n ' + 
          JSON.stringify(Object.values(Ay[2])) ;

var obj = JSON.parse(JSON.stringify(Ay));
Tt += '\n\n<r>var obj = JSON.parse(JSON.stringify(Ay))</r>'
Tt += '\nobj[0].aa = ' + obj[0].aa +'  obj[0].bb = '+obj[0].bb;
Tt += '\nobj[1].aa = ' + obj[1].aa +'  obj[1].bb = '+obj[1].bb;
Tt += '  obj[1].cc = ' + obj[1].cc ;
Tt += '\nobj[2].aa = ' + obj[2].aa +'  obj[2].bb = '+obj[2].bb;

demo.innerHTML = Tt;

</script>

Edit

#html #網頁格式 #style #div #JavaScript array 陣列 #JavaScript Array #html Array #JavaScript Array JSON #html Array JSON #html Object.keys() #JavaScript Object.keys() #html Object.values() #JavaScript Object.values()

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

setAttribute

element.setAttribute(name, value)
設置指定元素上的一個屬性值。

createElement()

createElement() 創建元素

parentElement children

children 子元素 / parentElement 父元素

blur focus

focus() / blur()

JavaScript Array

JavaScript Array JSON
JSON.stringify(JSON) / Object.keys( ) / Object.values( )

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

setAttribute

element.setAttribute(name, value) 設置指定元素上的一個屬性值。

createElement()

createElement() 創建元素

parentElement children

children 子元素 / parentElement 父元素

blur focus

focus() / blur()

JavaScript Array

JavaScript Array JSONJSON.stringify(JSON) / Object.keys( ) / Object.values( )

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

element.setAttribute(name, value)
設置指定元素上的一個屬性值。

JavaScript Array JSON
JSON.stringify(JSON) / Object.keys( ) / Object.values( )