One. Style programming
1. Each element of the page has a style object that manages the CSS style of the element. This was introduced in IE4.0 and was later accepted as a DOM standard. How to use:
var Odiv=document.getelementbyid ("Div1");
alert (ODiv.style.backgroundColor);
The Style object has a Csstext property that returns a CSS string that describes the style of the element.
2. Methods for Style object styles (IE6 does not support these methods):
(1) GetPropertyValue (PropertyName)--Returns the string value propertname the CSS attribute, such as This.style.getPropertyValue ("Background-color"); The propertyname here must be defined in terms of the CSS style.
(2) Getpropertypriority ()--return important string or null
(3) Item (index)--Returns the name of the CSS attribute at the given index
(4) Removeproperty (PropertyName)--Remove a CSS feature
(5) SetProperty (Propertyname,value,priorty)--Sets the value of the CSS attribute according to the execution priority
3. Examples of implementing custom mouse hints through hidden layers:
<title>style example</title>
<script type= "Text/javascript" src= "Detect.js" ></script>
<script type= "Text/javascript" src= "Eventutil.js" ></script>
<script type= "Text/javascript" >
function Showtip () {
var odiv = document.getElementById ("DivTip1");
oDiv.style.visibility = "visible";
var oevent=eventutil.getevent ();
ODiv.style.left = Oevent.clientx + 5;
ODiv.style.top = Oevent.clienty + 5;
}
function Hidetip () {
var odiv = document.getElementById ("DivTip1");
var oevent=eventutil.getevent ();
oDiv.style.visibility = "hidden";
}
</script>
<body>
<p>move your mouse over the red square.</p>
<div id= "Div1"
Style= "background-color:red; height:50px; width:50px "
Onmouseover= "Showtip ()" onmouseout= "Hidetip ()" ></div>
<div id= "DivTip1"
Style= "Background-color:yellow; Position:absolute; Visibility:hidden; padding:5px ">
<span style= "Font-weight:bold" >custom tooltip</span><br/>
More details can go here.
</div>
</body>
Here I used the JS file I jotted down in the JavaScript event model framework. The realization of the collapsible region is the same as this, very common function, no longer elaborate.