Straight Tips: JavaScript - Apply CSS Style In Scope

This method associates unique Ids to desired elements and then CSS Styles can be applied to them!

Test code here (Click)!

appendChild() in use:

<!DOCTYPE html>

<div>    <!-- _________________________________________________________ -->

<h2> 111111 </h2> <h2> 222222 </h2> <h2> 333333 </h2>
<h3> AAAAAA </h3> <h3> BBBBBB </h3> <h3> CCCCCC </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:red;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:gold;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:blue;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

document.write() in use:

<!DOCTYPE html>

<div>    <!-- _________________________________________________________ -->

<h2> 111111 </h2> <h2> 222222 </h2> <h2> 333333 </h2>
<h3> AAAAAA </h3> <h3> BBBBBB </h3> <h3> CCCCCC </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:red;} </style>');
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:Gold;} </style>');
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:Blue;} </style>');
</script>

</div>

Keywords:
JavaScript - Apply CSS Style In Scope
JavaScript - Elements Unique Id

jQuery

elevateZoom (Requires jQuery)

Facebook Page Like

BrowserTools - Paypal Me (Donate)

Ads (Reserved)

Tuesday, November 20, 2018

JavaScript - Apply CSS Style In Scope

No comments:

Post a Comment

Contact Form

Blog Archive