I have an html file with and internal css style tag, which includes css classes, I'm trying to change the value of color in a class called "header1", when window width becomes less than 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 to assign the value "red" to the variable hColor, I'm getting nothing, no errors too, it's just ignoring it, tried to test it using alert, I'm getting nothing, no type, no value.
My question is: how to change the value of a css class in internal css style sheet using javascript?.
I researched lots of answers, found a lot about creating style tag, and changing inlince css values, but not changing the value of internal css style, I found some in JQuery, I'm new to javascript, and I don't know JQuery, is this possible in javascript?
Here's the 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">
Some Text
</h1>
