Div Common Tasks (top)-General tasks (show scroll bars/Hide div/prevent event bubbling, etc.) __div

Reproduced from: http://www.jb51.net/web/72339.html

As the most common layout element, Div plays a vital role in web development. Here's a summary of the various actions I've encountered in using Div.1.div display scroll bar
This is a very common task, basically through the CSS to implement the scroll bar.
(1) Vertical scroll bar
Setting whether scroll bars are displayed is mainly to set the following properties in the CSS:

Copy code code as follows:
Overflow:visible|auto|hidden|scroll
Overflow-x: Horizontal scroll bar
OVERFLOW-Y: Vertical scroll bar

The meaning of the parameter:
Visible: Do not cut content nor add scroll bars. If you explicitly declare this default value, the object will be clipped to the size of the window or frame that contains the object. and the Clip property setting will fail.
Auto: This is the default value for the body object and textarea. Cut content and add scroll bars when needed
Hidden: Do not display content that exceeds the object size
Scroll: Always show scroll bars
Overflow:auto This means that when you're content exceeds the div height, vertical scroll bars appear.
So we want to show the vertical scroll bar when we need to, so we can do this:

Copy code code as follows:
<divstyle= "Overflow:auto;" >...</div>

Or

Copy code code as follows:
<divstyle= "Overflow-y:auto;" >...</div>

(2) Horizontal scroll bar
If you want to show only horizontal scrollbars, you will generally want to work with the setting that prohibits wrapping, for example:

Copy code code as follows:
<divstyle= "Overflow-x:auto;height:40px;width:100px;white-space:nowrap" ></div>

(3) The appearance of the scroll bar
In IE, the main use of a variety of color properties:

Copy code code as follows:
Scrollbar-3dlight-color:color; Sets or retrieves the color of the scroll bar's bright border;
Scrollbar-highlight-color:color to set or retrieve the bright edge color of the 3D interface of the scroll bar;
Scrollbar-face-color:color; Sets or retrieves the color of the 3D surface of the scroll bar;
Scrollbar-arrow-color:color Sets or retrieves the color of the scroll bar direction arrows, which fails when the scroll bar appears but is unavailable;
Scrollbar-shadow-color:color; Sets or retrieves the dark edge color of the 3D interface of the scroll bar;
Scrollbar-darkshadow-color:color to set or retrieve the black border color of the scroll bar;
Scrollbar-base-color:color Sets or retrieves the scroll bar datum color. Other interface colors will be automatically adjusted accordingly.
Scrollbar-track-color:color to set or retrieve the drag area color of the scroll bar

In Chrome, you basically use the WebKit private property setting:

Copy code code as follows:
::-webkit-scrollbar-track-piece{
Background-color: #fff/* The background color of the scroll bar/*
-webkit-border-radius:0;/* the fillet width of the scroll bar * *
}
::-webkit-scrollbar{
width:8px;/* the width of the scroll bar * *
height:8px;/* the height of the scroll bar * *
}
::-webkit-scrollbar-thumb:vertical{/* Vertical scroll bar style * *
height:50px;
Background-color: #999;
-webkit-border-radius:4px;
OUTLINE:2PXSOLID#FFF;
outline-offset:-2px;
BORDER:2PXSOLID#FFF;
}
::-webkit-scrollbar-thumb:hover{/* The hover style of the scroll bar * *
height:50px;
Background-color: #9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/* horizontal scroll bar style * *
width:5px;
Background-color: #CCCCCC;
-webkit-border-radius:6px;
}

2. Prohibit event bubbling of Div
This is basically using the standard Event.stoppropagation () method to block event bubbling, except for IE:

Copy code code as follows:
Functionbigdiv (event) {
if (event.stoppropagation) {
Event.stoppropagation ()///support practices in Firefox kernel based browsers stoppropagation
}else{
event.cancelbubble=true;//based on IE
}
Othercodes ...
}

3. Prevent Div from performing default behavior
This is actually a general problem, for elements with default behavior, such as the Submit button's submit form row for the,,<a> element's hyperlink behavior, and so on, if we apply events on these elements, we often want to cancel their default behavior, This is done by calling Event.preventdefault () in the callback function of the event.
4. Dynamically compute the position of the div (for example, the location of the common compute div popup)
(1) Dom Property Way
offsettop: The distance from the current object to the top of its parent layer. It cannot be assigned, and the Style.top property is required to set the distance of the object to the top of the parent object.
Offsetleft: The distance from the current object to the left of its parent layer. It cannot be assigned, and the Style.left property is required to set the distance of the object to the left of the parent object.
Here to pay attention to the difference between offsettop and Style.top (Offsetleft and Style.left is the same reason):
offsettop Returns a number, and Style.top returns a string with a unit in addition to the number: PX, which usually needs to be converted to a numeric value using parseint.
offsettop is read-only and style.top can read and write.
• Style.top returns an empty string if no top style has been specified for the HTML element.
Note: In Firefox, when assigning values to Style.top, it is also a string (with px) in this form.
(2) The influence of position properties on position in CSS
The default property values for position are static. But the most critical attribute value in position is relative (relative) and absolute (absolute).
Often we will absolute properties and left, top together to create the relevant "suspended layer" effect. However, sometimes we need to focus on the suspension effect of a container, not the window. At this time, the calculation of height and width is not only troublesome, but also can hardly achieve the result. In fact, as long as the first level of the style attribute position set to relative on it. That is, the effect of a position property value is directly affected by the Position property value in its container style. For example, the nested structure of the following a-b

Copy code code as follows:
<divid= "A" >
<divid= "B" >
</div>
</div>

When the position of a is relative, the position of B is valid for absolute. At this time left:0, top:0 is no longer for the window document, but for the ID of this div. But if you are in the padding= "50px" in a, the other one in a does not set postion as absolute will change with the value of a padding, but B will not change its position is relative to the previous level.
Here's a little bit of chatter. Position's four property values: Relative,absolute,fixed,static. Or take the above code as an example:
Relative
A relative value means that the element is offset relative to its position. For example, in the above code, if set B sets the relative value, for example, set the following CSS code:

Copy code code as follows:
#B {
position:relative;
padding:5px;
top:5px;
left:5px;
}

We can understand that if you do not set the relative property, B's position is in a normal document stream and it should be in a location. However, when the position of B is relative, the value of Top,right,bottom,left is offset according to the position it is supposed to be, and relative's "relative" meaning is also reflected here.
Note: The relative offset is based on the upper-left side of the object's margin。
Absolute
This attribute has always been misleading. said that when the position property is set to Absolute, always follow the browser window to locate, this is actually wrong. In fact, this is the characteristic of the fixed property.
When the position of B is set to absolute, whose object is to be offset. There are two types of situations:
• When B's parent object (or great-grandfather, as long as it is a parent object) parent also sets the position attribute, and the Position property value is absolute or relative, that is, not the default, at which point B is positioned according to the parent.
• When B does not exist a position attribute of the parent object, then it will be the body as the location object, according to the browser window to locate, this relatively easy to understand.
Fixed
Fixed is a special absolute, that is, fixed always with the body to locate objects, according to the browser window to locate.
Static
The default value of the position, typically without setting the Position property, is arranged according to the normal document flow.
(3) jquery Way
Tip Class Pop-up is a common way, and the most important task is to calculate the position of the pop-up box. Gets to the event source from the event object, and can then use the offset () function to calculate the location of the event source relative to the document:

Copy code code as follows:
vartop=$ (event.target). Offset (). Top;
varleft=$ (event.target). Offset (). Left;

Because it is relative to the document, that is, the position of the upper-left corner of the page, you need to place the pop-up layer in the first layer of the body element, that is, the parent is the body. If included in other elements, you need to determine the position style settings for any one of the parent classes to relative. The computed top and left are the location of the event source, where the event source object is shown to be obscured. So it's usually necessary to do some manual offsets, such as top+20.
5. Hide div elements
There are two ways to hide elements in CSS: Display:none or Visibility:hidden. The difference between the two ways is that when you set the value of display, the element is completely hidden, the element occupies no position, and the following elements move up. The position of the element after setting the visibility is still in the unseen.
6.div of child element horizontal, vertical
Control using the Float property. The div default is vertical, the width is set in 100%,css float:left and then it becomes horizontal. If you want to disconnect from the middle of the horizontal line and revert back to vertical, you need to use Clear:both modifications. Look at the following example:

Copy code code as follows:
<div>
<divstyle= "Float:left" >aaaaaaaaaaaaaa</div>
<divstyle= "Float:left" >bbbbbbbbbbbbbb</div>
The above two div is a horizontal arrangement.
<divstyle= "Clear:both" ></div> this thing is important, it clears the two layers of the float, which means that the following layers continue to be vertically aligned.
<div> This layer is arranged vertically </div>
<div> This layer is arranged vertically </div>
</div>

The above is just a simple application of the float property.
The Float property is primarily used to control the flow of elements, that is, to the right, or to the left. Here's a look at the syntax of the float property:

Copy code code as follows:
Float:none|left|right
None: Default value. object does not float
Left: Text flows to the right of the object
Right: Text flows to the left of the object

In order to achieve some effect, we usually need to cancel the float at some point to avoid having an effect on another object, which is achieved by the clear property described above:
The clear property has four values:

Copy code code as follows:
Clear:both|left|right|none;

To put it simply, the clear property works by clearing the float. If an element is set Clear:left, there is no floating element on the left side of the element, the corresponding clear:right means that there is no floating element on the right side of the element; Clear:both means that there are no floating elements on either side of the element. Clear:none indicates that floating elements are allowed on both sides.
7. Set the font for text in Div
Let's take a look at the list of properties that control text in CSS:

Copy code code as follows:
Word-spacing: Defines the spacing between each word, and takes the value:normal|<length>.
Letter-spacing: Defines the spacing between each letter, taking a value of:normal|<length>.
Text-decoration: Defines the "decorative" style of the text, taking a range of values: None|underline|overline|line-through|blink.
Vertical-align: Defines the position of the element in the vertical direction and takes the value:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>.
Text-transform: Converts text to another form, value: Capitalize|uppercase|lowercase|none.
Text-align: Defines the alignment of the text, and takes the value: Left|right|center|justify.
Text-indent: Defines the indentation of the first line of the text,:<length>|<percentage> the value.
Line-height: Defines the line height of the text, taking the value:normal|<number>|<length>|<percentage>.

We can see it from above. You can define text spacing, letter spacing, decoration, alignment, indentation, and row-high properties. For example, take a look:

Copy code code as follows:
<pstyle= "Letter-spacing:5px;text-align:justify;text-indent:4em;line-height:17pt" > We see more spacing between words and words that are processed by text attributes, more rows between lines and rows, alignment to both ends, and more than two spaces in the first paragraph. </p>

Letter-spacing sets the word spacing to 5px, where 5px is a unit of length, and text-align is aligned to justify, indent set the indent to 4em;line-height set the row height to 17pt. From the above example, we can see that using the text properties of CSS can easily typesetting the text in the page.
Line spacing depends on the size of the font, in general, small font size requires a larger line spacing to facilitate reading, Chinese fonts on the Web page if there is no line spacing set, for reading large paragraphs of text is a disaster for readers, so it is very necessary to set the appropriate line-height. Generally, line-height should be 1.5 times to twice times the size of the font in the web design. In Word and other text-editing software, 120% of the font is generally set as the default line spacing. CSS in the line-height set, is evenly divided after each row of the upper and lower, that is, if the line-height set to 20px, then each line of text up and down each have 10px spacing.
8. Set Div's ToolTip branch display
In HTML for links and pictures, we can add the title attribute to display some descriptive text, in general, the text is displayed in a row, then there is no way to let it appear in a multiline way. There are two ways to solve this problem:
(1). Write the title attribute into several lines, for example:

Copy code code as follows:
<ahref=# "title=" description of a
Description Two
Description of the three "> Construction Station Science </a>

(2). The first line is relatively less intuitive, we can also add & #10 in the place where we want to change the line, (& Half-width) or & #13 to achieve:

Copy code code as follows:
<ahref=# "title=" description & #10; description two & #10; description three "> Construction and Learning </a>
<ahref=# "title=" description & #13; description two & #13; description three "> Construction and Learning </a>

9. middle mouse button control horizontal scroll bar
In Chrome and Firefox, is generally the mouse button to control the vertical scroll bar, if your div only horizontal control bar, by default, the middle mouse button is not rolling effect, this time need to achieve their own.
First, hook up the mouse wheel event:

Copy code code as follows:
Mousewheeleventfornonfirefox
element.onmousewheel=fireelementscrolled;
Mousewheeleventforfirefox
Element.addeventlistener (' Dommousescroll ', fireelementscrolled,false);

Here Firefox is a special point that needs to be hooked up using AddEventListener this way.
Then, implement the Fireelementscrolled method:

Copy code code as follows:
Fireelementscrolled=function (event) {
Varrolled=0;
if (Event.wheeldelta) {
Rolled=event.wheeldelta;
}
else{
Firefox: Need to deal with the next
rolled=-event.detail*30;
}
Varhtmlelement=document.getelementbyid (' Test ');
htmlelement.scrollleft=htmlelement.scrollleft-rolled;
Event.preventdefault ();
Returnfalse;
};

The principle is very simple, is to get the wheel scrolling distance, after processing to the DIV element ScrollLeft property assignment.
10. Child element Centered
(1) Horizontal Center
Normal text and picture is good to center, set the parent container CSS style contains text-align:center;
When the child element is a div and other elements of the situation a little more complex, with child elements as a div for example, if there is only a child div, you can set the child elements of the CSS style to include Margin:0auto; For example, the following example:

Copy code code as follows:
<divid= "A" style= "Width:400px;height:300px;border:1pxsolidgreen"; >
<divid= "B" style= "Margin:0auto;width:200px;border:1pxsolidblue"; > Simple Sub div center problem </div>
</div>

If there are multiple child elements, I usually add a layer of div to implement, see example:

Copy code code as follows:
<divstyle= "width:400px;height:300px;border:1pxsolidred;" >
<divstyle= "Margin:0auto;position:relative;left:50%;float:left;" >
<divstyle= "Position:relative;left:-50%;float:left" >
<divstyle= "Border:1pxsolidblue;text-align:center;" >1</div>
<divstyle= "Border:1pxsolidblue;text-align:center;" >2</div>
<divstyle= "Border:1pxsolidblue;text-align:center;" >3</div>
<divstyle= "Border:1pxsolidblue;float:left;" >4</div>
<divstyle= "Border:1pxsolidblue;float:left;" >5</div>
<divstyle= "Border:1pxsolidblue;float:left;" >6</div>
</div>
</div>
</div>

(2) Vertically centered
Vertical Center trouble A bit, there is a simple way to achieve both horizontal and vertical centering. First write the positon:relative to the parent element so that it is not positioned outside to position:absolute the child elements. Next, write the child element of height and width, some browsers in the parsing time without these 2 values will appear unexpected dislocation. Then there is the core of the whole method, and then the top:50%;left:50% and margin-top: The negative number of half the height value, margin-left: Half of the weight value. Of course, the parent element should also be written with width and height first. See Example:

Copy code code as follows:
<divstyle= "width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px ; border:1pxsolidred; " > Center Method </div>