Home > Developer > JavaScript
Two days ago, a small project wanted to add a shadow effect to an element, but I remember reading the article "simulating the shadow effect with Div/CSS" written by a senior. Now I still have some impressions. The idea is very simple, it mainly uses the positioning offset of several layers to implement the shadow effect, so I thought it could not be encapsulated into a js function, so that it is convenient to call on each html object.
At first, I thought it was very simple, but I encountered many problems in the implementation process. The most serious problem was the compatibility of the browser. It took me a whole night to finish the problem, khan! However, this little thing gives me a deeper understanding of the differences between js and Some browsers and their solutions.
This is a summary for future convenience!
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> </title> <style type =" text/css "> * {margin: 0px ;}# msgdiv {border: 1px solid # d3d3d3; text-align: center; font-size: 12px; width: 150px; line-height: 50px; background: # f7f7f7; color: # f00 ;}. content {border: 1px solid #999; background: # f0f0f0; width: 150px; height: 50px ;} </style> </pead> <body> <p id = "ddd" onclick = "alert (document. body. innerHTML); "> kkkkk </p> safasdf dsfgsdfg AAAAAAAAAAAAAAAAA <p id =" newp "style =" width: 300px; height: 50px; border: 1px solid # 00f "> aaaaaaaaaaa </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The theme of the design is as follows:
For elements that require shadow:
IE/NS: Create a layer with the same location as the element size, and use the offset method to make the layer shadow, then, the layer is located at the same position based on the absolute position of the element and z-index =-1 is set to achieve the shadow effect.
FF/Opear: Same idea, but because FF/Opear does not support z-index:-1, therefore, you must set the z-index of the original element to a value greater than 0 (you must set the element to absolute positioning) to overwrite the shadow layer, because you need to set z-index, the element must be set to absolute positioning, so it is more difficult here. Even the solution is to clone a content with identical elements and hide it (using visibility: hidden), but it still occupies the place where the original element is placed, and the original element is set to absolute positioning and the value of z-index is set to greater than 0.
There are many problems encountered during the production process, including:
1. style.css Text attributes are only supported by browsers except opera,
2. offsetleft and offsetTop are different in IE/Opear, FF, and NS.
(There are also some small bugs in different browsers. For the solution, see the previous log)
Fortunately, all of them have been solved one by one! It is now compatible with the latest versions of most browsers. Even in IE6.0, FF2.0, NS8.1, and Opear9.0
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
