Javascript, How to change a value of an internal css class -
this question has answer here:
i have html file , internal css style tag, includes css classes, i'm trying change value of color in class called "header1", when window width becomes less 700:
<script type="text/javascript"> var width = document.body.clientwidth; if (width <=700){ var hcolor = document.getelementsbytagname("style").item("header1").style.color; alert(hcolor); } </script> i tried assign value "red" variable hcolor, i'm getting nothing, no errors too, it's ignoring it, tried test using alert, i'm getting nothing, no type, no value.
my question is: how change value of css class in internal css style sheet using javascript?.
researched lots of answers, found lot creating style tag, , changing inlince css values, not changing value of internal css style, found in jquery, i'm new javascript, , don't know jquery, possible in javascript?
here's relevant piece of html:
<doctype! html> <head> <style type="text/css" name="mystyle"> body { margin:0%; padding:0%; background-color:#c9d2d9; } .div { width:75%; height:auto; margin:2em auto; } .nested-div{ width:100%; height:auto; margin:2em auto; } .header1{ width:100%; text-align: center; font-family: 'lobster', cursive; color: aquamarine; } </style> <script type="text/javascript"> var width = document.body.clientwidth; if (width <=700){ var hcolor = document.stylesheets[0].rules; alert(hcolor[0].slectortext); } </script> </head> <!--------------------------------------------- body ----------------------------------------------> <body> <div class="div"> <div class="nested-div"> <h1 class="header1"> text </h1>
Comments
Post a Comment