JavaScript Dom Technology (ii)

Source: Internet
Author: User
Tags visibility

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.