hi again
is there a way to change css rules using javascript? i have this:
<style type="text/css">
.flash
{
position:absolute;
left:52px;
bottom:30px;
}
.logo
{
position:absolute;
left:0px;
top:20px
}
</style>and i want to change .logo and .flash attributes depending on the window size...
thanks
No, as far as I know, you can't do that. But you can surely get hold of all the elements which use that class and change their property which is what you must be aiming for, methinks.
<html>
<head>
<style>
.one
{
background-color: blue;
}
.two
{
background-color: green;
}
</style>
<script>
getElementsByClassName = function (needle)
{
var my_array = document.getElementsByTagName("*");
var retvalue = new Array();
var i;
var j;
for (i = 0, j = 0; i < my_array.length; i++)
{
var c = " " + my_array[i].className + " ";
if (c.indexOf(" " + needle + " ") != -1)
retvalue[j++] = my_array[i];
}
return retvalue;
}
function changeColor(name, color)
{
var elements = getElementsByClassName(name);
for(var i = 0; i < elements.length; ++i)
{
if(elements[i])
elements[i].style.backgroundColor = color;
}
}
</script>
</head>
<body>
<form>
<p class="one">Hello to all</p>
<p class="two">Someone is here</p>
<p class="one">Really? Who is he?</p>
<p class="two">Do I know him?</p>
<input type="button" value="Blue to Red" onclick="changeColor('one', 'red');" />
<input type="button" value="Green to Yellow" onclick="changeColor('two', 'yellow');" />
</form>
</body>
</html>Yes, it is not possible to modify rules in the CSS file, but you can modify the style of the DOM node.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.