...

View Full Version : js applayed style / restore original css rules ?



BubikolRamios
11-11-2011, 04:35 PM
Test page:
http://agrozoo.net/jsp/test4.html



<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
</title>

<style type="text/css">
.b
{
visibility:visible;
}

.a span
{
background-color:red;
}
.a:hover .b
{
visibility:hidden;
}

</style>

</head>
<body>
1. move mouse over aaa<br />
2. <span onClick ="document.getElementById('target').style.visibility = 'visible'">click</span><br />
3.move mouse over aaa<br />
4. why does css rule not working anymore ? How to restore css behaviour ?<br />
<br />
<br />
<div class ="a">
<span>aaa</span>
<br />
<br />
<div id ="target"class ="b">
bbb
</div>
</div>


</body>
</html>

Occam's Razor
11-11-2011, 06:39 PM
When you use javascript to alter an element's style you are adding it as inline style (in other words, you are adding a "style" attribute to the element's tag) and in CSS terms, you cascade the style from header CSS to inline CSS. This means that the inline CSS overrides what is in the header (or within <style> tags in general).

So to fix that, you can use the javascript function "removeAttribute()" to get your cascading back the way you want it:


document.getElementById('target').removeAttribute('style');

I believe that should do it...

BubikolRamios
11-11-2011, 09:37 PM
adding it as inline style

Was thinking about that, but needed to hear it for sure.

Anyway the removeAttribute('style'); thing deletes inline style (not added by js) also, so one should be careful.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum