Q. What is dom style method () ?

इसका use dom के अंदर inline css की तरह किया जाता है।

Syntax :

.style

Example 1. (style Method By Query Selector)

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
<div class="content_class">
<h1>Set Dom Value</h1>
<div>

  <h2>First heading</h2>
  <p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. <a href="readfirst.html" class="my-btn">More First</a></p>
  </div>


  <div>
  <h2>Second heading</h2>
  <p>Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text. <a href="readsecond.html" class="my-btn">More Seond</a> </p>
  </div>

  <div>
  <h2>Third heading</h2>
  <p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. <a href="readthird.html" class="my-btn">More Third</a> </p>
  </div>

  <div>
  <h2>Forth  heading</h2>
  <p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. <a href="readforth.html" class="my-btn">More Forth</a></p>
  </div>

  <div>
  <h2>Fifth  heading</h2>
  <p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. <a href="readfifth.html" class="my-btn">More Fifth</a></p>
  </div>
</div>
</article>


<script type="text/javascript">
//example 1 with query Selector
var a = document.querySelector("#idcontainer .content_class div");
a.style.background="lightblue";
a.style.padding="20px";
a.style.border="solid 3px darkblue";

//example 2 with query Selector
var b = document.querySelector("#idcontainer .content_class div a");
b.style.background="darkblue";
b.style.display="table";
b.style.margin="10px 0 10px auto";
b.style.padding="5px 10px";
b.style.borderRadius="4px"
</script>

Example 2 . (All Element Style by querySelectorAll)

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
<div class="content_class">
<h1>Set Dom Value</h1>
<div>

  <h2>First heading</h2>
  <p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. <a href="readfirst.html" class="my-btn">More First</a></p>
  </div>


  <div>
  <h2>Second heading</h2>
  <p>Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text. <a href="readsecond.html" class="my-btn">More Seond</a> </p>
  </div>

  <div>
  <h2>Third heading</h2>
  <p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. <a href="readthird.html" class="my-btn">More Third</a> </p>
  </div>

  <div>
  <h2>Forth  heading</h2>
  <p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. <a href="readforth.html" class="my-btn">More Forth</a></p>
  </div>

  <div>
  <h2>Fifth  heading</h2>
  <p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. <a href="readfifth.html" class="my-btn">More Fifth</a></p>
  </div>
</div>
</article>


<script type="text/javascript">
// All Element Style by querySelectorAll

//first div style
var a = document.querySelectorAll("#idcontainer .content_class div")[0];
a.style.background="lightblue";
a.style.padding="20px";
a.style.margin="20px 0";
a.style.border="solid 3px darkblue";
var b = document.querySelectorAll("#idcontainer .content_class div a")[0]; //btn style
b.style.background="darkblue";
b.style.display="table";
b.style.margin="10px 0 10px auto";
b.style.padding="5px 10px";
b.style.borderRadius="4px"

//second div style
var a = document.querySelectorAll("#idcontainer .content_class div")[1];
a.style.background="lightblue";
a.style.padding="20px";
a.style.margin="20px 0";
a.style.border="solid 3px darkblue";
var b = document.querySelectorAll("#idcontainer .content_class div a")[1]; //btn style
b.style.background="darkblue";
b.style.display="table";
b.style.margin="10px 0 10px auto";
b.style.padding="5px 10px";
b.style.borderRadius="4px"

//third div style
var a = document.querySelectorAll("#idcontainer .content_class div")[2];
a.style.background="lightblue";
a.style.padding="20px";
a.style.margin="20px 0";
a.style.border="solid 3px darkblue";
var b = document.querySelectorAll("#idcontainer .content_class div a")[2]; //btn style
b.style.background="darkblue";
b.style.display="table";
b.style.margin="10px 0 10px auto";
b.style.padding="5px 10px";
b.style.borderRadius="4px"

//forth div style
var a = document.querySelectorAll("#idcontainer .content_class div")[3];
a.style.background="lightblue";
a.style.padding="20px";
a.style.margin="20px 0";
a.style.border="solid 3px darkblue";
var b = document.querySelectorAll("#idcontainer .content_class div a")[3]; //btn style
b.style.background="darkblue";
b.style.display="table";
b.style.margin="10px 0 10px auto";
b.style.padding="5px 10px";
b.style.borderRadius="4px"

//fifth div style
var a = document.querySelectorAll("#idcontainer .content_class div")[4];
a.style.background="lightblue";
a.style.padding="20px";
a.style.margin="20px 0";
a.style.border="solid 3px darkblue";
var b = document.querySelectorAll("#idcontainer .content_class div a")[4]; //btn style
b.style.background="darkblue";
b.style.display="table";
b.style.margin="10px 0 10px auto";
b.style.padding="5px 10px";
b.style.borderRadius="4px"

</script>

Note :
इस Example में देख सकते हैं की same type के element को style करने के लिए same type के code को repeat किया गया है । सिर्फ इसमें variable name change हो रहा है और querySelecotrAll () method के position change हो रहा है।
इसी type से हमें same type के 1000 element को style करना होता तो हमें इस code 1000 वार code को repeat करना होता। जिससे हमारे file की size बढ़ जाएगी।
इसी से बचने के लिए हम forEach () method का use कर सकते है

Example 3 . (All Element Style by querySelectorAll with forEach)

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
<div class="content_class">
<h1>Set Dom Value</h1>
<div>

  <h2>First heading</h2>
  <p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. <a href="readfirst.html" class="my-btn">More First</a></p>
  </div>


  <div>
  <h2>Second heading</h2>
  <p>Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text. <a href="readsecond.html" class="my-btn">More Seond</a> </p>
  </div>

  <div>
  <h2>Third heading</h2>
  <p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. <a href="readthird.html" class="my-btn">More Third</a> </p>
  </div>

  <div>
  <h2>Forth  heading</h2>
  <p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. <a href="readforth.html" class="my-btn">More Forth</a></p>
  </div>

  <div>
  <h2>Fifth  heading</h2>
  <p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. <a href="readfifth.html" class="my-btn">More Fifth</a></p>
  </div>
</div>
</article>


<script type="text/javascript">
// All Element Style by querySelectorAll

//div style
var a = document.querySelectorAll("#idcontainer .content_class div");
a.forEach(myfunc);
function myfunc(div_stl){
div_stl.style.background="lightblue";
div_stl.style.padding="20px";
div_stl.style.margin="20px 0";
div_stl.style.border="solid 3px darkblue";
}

//btn style
var b = document.querySelectorAll("#idcontainer .content_class div a");
b.forEach(myfunc2);
function myfunc2(btnstl){
btnstl.style.background="darkblue";
btnstl.style.display="table";
btnstl.style.margin="10px 0 10px auto";
btnstl.style.padding="5px 10px";
btnstl.style.borderRadius="4px";
btnstl.style.color="white";
}

</script>