常见的JS和CSS问题
事件冒泡
DOM的事件冒泡机制和WPF很相似，DOM事件机制包含冒泡和捕获两种，按照topmost element->innermost element方向传递事件被称为捕获方式，而从innermost element->topmost element方向传递事件被称为冒泡方式。
事件传递说明：
1.捕获（Capture）传递方式通过：1>2>3。
2.冒泡(Bubble) 传递方式通过：3>2>1。
这里要特别说明的是，在<IE9的浏览器没有捕获机制，只有冒泡机制。基于W3C标准，事件传递分捕获和冒泡两个阶段。那么我们注册事件时怎样注册到不同的阶段？
大家应该都熟悉addEventListener方法，在使用时很多时候都是传递两个参数：
document.getElementById("d1").addEventListener("click", function(event){
alert("d1");
});
但addEventListener为我们提高了三个参数，最后一个是boolean值，默认是false。正是通过这个参数来区分捕获和冒泡方式。false表示冒泡，true表示捕获。
//冒泡方式
document.getElementById("d1").addEventListener("click", function(event){
alert("d1");
, false);
//捕获方式
document.getElementById("d1").addEventListener("click", function(event){
alert("d1");
, true);
在事件的传递阶段，我们怎么取消事件的传递？event参数体提供了取消办法。下面代码说明了取消使用代码：
document.getElementById("d3").addEventListener("click", function(event){
alert("d3");
event = event || window.event;
//W3C标准
if(event.stopPropagation){
event.stopPropagation();
}
//IE兼容
else{
event.cancelBubble = true;
}
}, false);
下面给出可运行的测试Demo，执行代码可以很清楚的看到事件传递的两个阶段并且可以在两个阶段的任意元素上终止事件的传递。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div-class-1, .div-class-2, .div-class-3{
padding: 30px;
}
.div-class-1{
width: 200px;
height: 200px;
background: #fd0303;
}
.div-class-2{
width: 100px;
height: 100px;
background: #fdf403;
}
.div-class-3{
width: 50px;
height: 50px;
background: #03fd38;
}
</style>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(function(){
document.getElementById("d1").addEventListener("click", function(event){
alert("d1");
}, false);
document.getElementById("d2").addEventListener("click", function(event){
alert("d2");
}, false);
document.getElementById("d3").addEventListener("click", function(event){
alert("d3");
event = event || window.event;
//W3C标准
if(event.stopPropagation){
event.stopPropagation();
}
//IE兼容
else{
event.cancelBubble = true;
}
}, false);
document.getElementById("d1").addEventListener("click", function(event){
alert("d1");
}, true);
document.getElementById("d2").addEventListener("click", function(event){
alert("d2");
}, true);
document.getElementById("d3").addEventListener("click", function(event){
alert("d3");
}, true);
});
</script>
</head>
<body>
<div id="d1" class="div-class-1">
<span>d1</span>
<div id="d2" class="div-class-2">
<span>d2</span>
<div id="d3" class="div-class-3">
<span>d3</span>
</div>
</div>
</div>
</body>
</html>
使用offset、scroll、clientHeight定位元素
有时候我们需要在页面的右边中间位置或者底部位置显示悬浮面板，悬浮面板的定位需要使用offsetXXX、scrollXXX、clientXXX属性。下面我们都拿Vertical方向来说明。
1.scrollHeight: 所有元素内容的高度(只读)，也就是页面所有内容的整个高度。
2.scrollTop：当前元素所在位置之前的整个高度，可读可写。如果没有滚动条，scrollTop为0。
3.clientHeight：元素的可见高度，不包含padding和border，只读。
4.offsetHeight: 元素高度，包含了padding和border，只读。
如果我们想在滚动条滚动的同时，让元素始终显示在浏览器页面的中间位置，可以通过以下设置：
div.style.top = winScrolTop + (winclientHeight/2) - (divHeight/2) + "px";
说明：winScrolTop为window的scrollTop，winclientHeight为window的可见高度，divHeight为元素的高度。在使用clientHeight时需要注意兼容性问题，不同版本浏览器取clientHeight方式都不一样。需要根据document.compatMode来判断。
如果document.compatMode等于BackCompat表示关闭标准兼容模式，等于CSS1Compat表示开启标准兼容性模式。BackCompat时浏览器高度等于document.body.clientHeight，CSS1Compat时浏览器高度等于document.documentElement.clientHeight。
下面是测试Demo代码：
<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="gb2312">
<title>offset&scroll&clientHeight元素定位</title>
<style type="text/css">
.body-class1{
position: absolute;
width: 200px;
height: 200px;
background: #CD0000;
right: 0;
}
.body-class2{
position: fixed;
width: 200px;
height: 200px;
background: #CD0000;
right: 0;
bottom: 10px;
}
</style>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
/*
* scrollHeight: 元素所有内容的高度(只读) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
* scrollTop：从元素之前所有内容的高度(可读可写), 如果没有滚动条，则为0。 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
* clientHeight：元素可见高度(只读)。https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
* offsetHeight: 元素高度(只读), 包含pading、border
*/
function setVerticalLocation(){
var div = document.getElementById("d1");
//div的高度，包括border和padding
var divHeight = div.offsetHeight;
// document.compatMode：BackCompat和CSS1Compat。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
//当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
//当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
//http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html
var winclientHeight = /BackCompat/i.test("document.compatMode") ? document.body.clientHeight : document.documentElement.clientHeight;
var winScrolTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
div.style.top = winScrolTop + (winclientHeight/2) - (divHeight/2) + "px";
}
$(document).ready(function(){
var setTop = function(){
setTimeout(function(){
setVerticalLocation();
}, 100);
}
$(window).bind("scroll", function(event){
setTop();
});
$(window).bind("resize", function(event){
setTop();
});
});
</script>
</head>
<body>
<div id="d1" class="body-class1">
<span>你得把我显示在浏览器垂直中间位置</span>
</div>
<div id="d1" class="body-class2">
<span>你得把我显示在浏览器垂直底部位置</span>
</div>
<h1>offset&scroll&clientHeight元素定位</h1>
...自己写若干个分行，让浏览器出现滚动条
<br><span>滚滚滚...</span>
</body>
</html>
模仿JD写个右栏菜单
大家看到得当前文章页面的右边中间位置有几个菜单，这个功能其实是仿照JD商城页面做了一个悬浮停靠菜单。下面是右栏菜单生成代码：
<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="gb2312">
<title>右栏菜单</title>
<style type="text/css">
.h-tab{
position: fixed;
width: 36px;
right: 0;
top: 100px;
border-right: 2px solid #7a6e6e;
padding: 0;
margin: 0;
}
.h-tab .h-bar{
position: relative;
background: #7a6e6e;
width: 35px;
height: 35px;
margin-bottom: 3px;
color: #fff;
font-weight: bold;
font-size: 10px;
line-height: 35px;
}
.h-tab .h-bar-title{
width: 35px;
height: 35px;
text-align: center;
background: #7a6e6e;
position: absolute;
z-index: 1000;
text-indent: 5px;
right: -1px;
}
.h-tab .h-bar-title:hover{
background: #c81623;
cursor: pointer;
}
.h-tab .h-bar-desc{
position: absolute;
background: #c81623;
height: 35px;
width: 100px;
top: 0;
right: -65px;
z-index: 900;
text-align: left;
text-indent: 5px;
}
.hid{
display: none;
}
</style>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
function Rightmenu(){
}
Rightmenu.prototype.removeAdapterMenu = function(){
$(".h-tab").find("#adapterMenu, #fastcomment, #recommend").parents(".h-bar").remove();
return this;
}
Rightmenu.prototype.createRightMenu = function(){
var html = '<div class="h-tab">' +
'<div class="h-bar">' +
'<div id="goTop" class="h-bar-title">' +
'<span>↑</span>' +
'</div>' +
'<div class="h-bar-desc hid">' +
'<span>顶部</span>' +
'</div>' +
'</div>' +
'<div class="h-bar">' +
'<div id="adapterMenu" class="h-bar-title">' +
'<span>关</span>' +
'</div>' +
'<div class="h-bar-desc hid">' +
'<span>菜单</span>' +
'</div>' +
'</div>' +
'<div class="h-bar">' +
'<div id="fastcomment" class="h-bar-title">' +
'<span>注</span>' +
'</div>' +
'<div class="h-bar-desc hid">' +
'<span>评论</span>' +
'</div>' +
'</div>' +
'<div class="h-bar">' +
'<div id="recommend" class="h-bar-title">' +
'<span>我</span>' +
'</div>' +
'<div class="h-bar-desc hid">' +
'<span>推荐</span>' +
'</div>' +
'</div>' +
'<div class="h-bar">' +
'<div id="goBottom" class="h-bar-title">' +
'<span>↓</span>' +
'</div>' +
'<div id="" class="h-bar-desc hid">' +
'<span>底部</span>' +
'</div>' +
'</div>' +
'</div>';
$("body").append(html);
return this;
}
Rightmenu.prototype.registEvent = function(){
$(".h-tab .h-bar").bind("mouseenter", function(){
//停止其他动画
$(".h-tab .h-bar").find(".h-bar-desc").finish();
$(this).find(".h-bar-desc").removeClass("hid");
$(this).find(".h-bar-desc").delay(100).animate({right: "-1px"}, 400);
});
$(".h-tab .h-bar").bind("mouseleave", function(){
//停止其他动画
$(".h-tab .h-bar").find(".h-bar-desc").finish();
var desc = $(this).find(".h-bar-desc");
$(desc).animate({right: "-65px"}, 100, "linear", function(){
$(desc).addClass("hid");
});
});
//注册go top事件
$("#goTop").bind("click", function(event){
locateElement("#header");
});
//注册menu事件
$("#adapterMenu").bind("click", function(event){
if(!$("#footer_menu_container").hasClass("hid")){
$("#footer_menu_container").addClass("hid");
}else{
$("#footer_menu_container").removeClass("hid");
}
});
//注册fastcomment事件
$("#fastcomment").bind("click", function(event){
locateElement("#footer");
});
//注册recommend事件
$("#recommend").bind("click", function(event){
if(!$("#heavifooter").hasClass("hid")){
$("#heavifooter").addClass("hid");
}else{
$("#heavifooter").removeClass("hid");
}
});
//注册go Bottom事件
$("#goBottom").bind("click", function(event){
locateElement("#footer");
});
return this;
}
$(document).ready(function(){
(new Rightmenu()).createRightMenu().registEvent().removeAdapterMenu();
});
</script>
</head>
<body>
</body>
</html>
生成元素之后，我们要让元素始终显示在中间位置。基本上有两个步骤，先初始化到中间位置，然后注册浏览器的resize事件，当浏览器大小改变时自动调节位置。下面是我写的一段定位任何元素的代码：
function FloatPage(id, position){
this.id = id;
this.position = position;
}
FloatPage.prototype.init = function(){
var c = this;
this.autoAdapt();
$(window).bind("resize", function(event){
c.autoAdapt();
});
}
FloatPage.prototype.autoAdapt = function(){
var element = document.getElementById(this.id);
var eHeight = element.offsetHeight;
var winHeight = /BackCompat/i.test("document.compatMode") ? document.body.clientHeight : document.documentElement.clientHeight;
if(this.position == "top"){
element.style.top = 0;
}else if(this.position == "center"){
element.style.top = (winHeight/2) - (eHeight/2) + 'px';
}else {
element.style.top = winHeight - eHeight + 'px';
}
}
下面一段代码调用创建菜单方法，然后定位元素并且注册resize事件。代码如下：
//创建右栏菜单
var rightMenu = (new Rightmenu()).createRightMenu().registEvent();
//设置右栏菜单停靠位置
(new FloatPage("rightMenuTab", "center")).init();
元素水平和垂直居中
水平居中
居中分为水平和垂直居中，水平居中比较容易解决。如果是非块级别的inline元素(例如显示文字的span)设置水平居中，直接设置样式:
span{
text-align: center;
}
如果是块级别的inline-block或者block元素，如果已知width的情况下可通过下面方式设置居中：
复制代码
.children{
background: red;
width: 50px;
height: 50px;
margin: 0 auto;
}
垂直居中
级别为inline-block或者inline的元素，可通过设置line-height让元素居中显示。
垂直居中比水平居中稍微复杂些，不管是哪种方式，一般都会设置css属性position为absolute定位元素。在已知height情况下可结合
top和margin-top设置居中：
.children{
width: 50px;
height: 50px;
left: 50%;
margin-left: -25px;
position: absolute;
top: 50%;
margin-top: -25px;
}
说明：上面的样式也包含了水平居中的方法。
在不知道height的情况，可以使用W3C提供的transform属性。设置如下：
.children{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-moz-transform: translate(-50%, -50%); /* Firefox */
-webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */
-o-transform: translate(-50%, -50%); /* Opera */
}
说明：translate(-50%, -50%)表示元素的位置向左偏移元素宽度的50%，向上偏移高度的50%。完整的测试代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.parent{
background: green;
width: 300px;
height: 200px;
position: relative;
}
/*
* 方法一，inline-block或者block元素水平居中方式
*/
/*.children{
background: red;
width: 50px;
height: 50px;
margin: 0 auto;
}
*/
/*
** 方案二，知道元素的width和height
.children{
width: 50px;
height: 50px;
left: 50%;
margin-left: -25px;
position: absolute;
top: 50%;
margin-top: -25px;
}
*/
/*
** 方案三，不知道元素的width和height
*/
.children{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-moz-transform: translate(-50%, -50%); /* Firefox */
-webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */
-o-transform: translate(-50%, -50%); /* Opera */
}
</style>
<script type="text/javascript">
function submitByNA(value){
alert(value);
}
</script>
</head>
<body>
<div class="parent">
<div class="children">
</div>
</div>
<div>
</body>
</html>
inline元素遇见padding和margin
padding和margin对inline-block和block元素都能生效。而对inline来说，padding和margin只对水平设置生效。测试demo如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.body-class-block{
display: block;
background: yellow;
/*margin: 10px; */ /*有效*/
/*padding: 10px; */ /*有效*/
}
.body-class-inlineblock{
display: inline-block;
background: red;
/* margin: 20px 10px; */ /* 有效 */
/* padding: 20px 10px; */ /* 有效 */
}
.body-class-inline{
display: inline;
background: green;
/*margin: 20px 10px; */ /* margin只对左右有效 */
/*padding: 20px 10px; */ /* padding只对左右有效 */
line-height: 2em; /* 如果要设置高度，可使用line-height */
}
</style>
</head>
<body>
<div class="body-class-block">
<span>block element</span>
</div>
<div class="body-class-inlineblock">
<span>inline-block element</span>
</div>
<div style="clear: both;"></div>
<div class="body-class-inline">
<span>inline element</span>
</div>
<div class="body-class-inline">
<span>inline element</span>
</div>
</body>
</html>
圆角兼容性处理
在使用CSS3提供的border-radius和graident属性时，我们得考虑兼容性，IE9以下的版本都不支持这些属性，为了解决兼容性，可以使用PIE框架，下面的这段代码大家可以在IE9以下的IE浏览器下测试兼容性。但得自己到PIE官网上去下载PIE框架代码。
<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="gb2312">
<title>圆角兼容性测试</title>
<style type="text/css">
.body-radius-class1, .body-radius-class2{
margin: 10px 20px;
padding: 10px 20px;
}
/* 圆角，没解决兼容性 */
.body-radius-class1{
background: #FF0000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
/* 圆角，解决兼容性 */
.body-radius-class2{
background: #8B4C39;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/* 使用PIE解决兼容性 */
behavior: url("PIE/PIE.htc");
}
.body-gradient-class1, .body-gradient-class2{
margin: 10px 20px;
padding: 10px 20px;
}
/* 渐变，没解决兼容性 */
.body-gradient-class1{
background: #8EE5EE;
background: -moz-linear-gradient(to bottom, #8EE5EE, #fff);
background: -webkit-linear-gradient(to bottom, #8EE5EE, #fff);
background: linear-gradient(to bottom, #8EE5EE, #fff);
}
/* 渐变，解决兼容性 */
.body-gradient-class2{
background: #8E8E8E;
background: -moz-linear-gradient(to bottom, #8E8E8E, #fff);
background: -webkit-linear-gradient(to bottom, #8E8E8E, #fff);
background: linear-gradient(to bottom, #8E8E8E, #fff);
/* 使用PIE解决兼容性 */
-pie-background: linear-gradient(#8E8E8E, #fff);
behavior: url("PIE/PIE.htc");
}
</style>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
</head>
<body>
<h1>border-radius</h1>
<div class="body-radius-class1">
<span>没解决兼容性</span>
</div>
<div class="body-radius-class2">
<span>解决兼容性</span>
</div>
<h1>gradient</h1>
<div class="body-gradient-class1">
<span>没解决兼容性</span>
</div>
<div class="body-gradient-class2">
<span>解决兼容性</span>
</div>
</body>
</html>
常见的JS和CSS问题的更多相关文章
- 使用yuicompressor-maven-plugin压缩js及css文件
本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...
- JS控制css float属性的用法经验总结
JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...
- （转）使用yuicompressor-maven-plugin压缩js及css文件（二）
本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...
- yui压缩JS和CSS文件
CSS和JS文件经常需要压缩,比如我们看到的XX.min.js是经过压缩的JS. 压缩文件第一个是可以减小文件大小,第二个是对于JS文件,默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参 ...
- 把JS和CSS合并到1个文件
合并JS文件和CSS文件很多人都知道,也用过,目的是为了减少请求数.但有时候我们觉的把JS合并到1个文件,CSS又合并到另外1个文件也是浪费,我们如何能把CSS和JS一起合并进1个文件了? 这里需要使 ...
- python爬虫爬小说网站涉及到(js加密,CSS加密)
我是对于xxxx小说网进行爬取只讲思路不展示代码请见谅 一.涉及到的反爬 js加密 css加密 请求头中的User-Agent以及 cookie 二.思路 1.对于js加密 对于有js加密信息,我们一 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- js或css文件后面的参数是什么意思？
经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...
随机推荐
- 一次完整的HTTP事务是怎样一个过程
当我们在浏览器的地址栏输入 www.linux178.com,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 以下过程仅是个人理解: 域名解析 --> 发起TCP的3次握手 --> 建 ...
- zentaoPHP框架是做什么的（整理）
zentaoPHP框架是做什么的(整理) 一.总结 一句话总结:应该是主要用作项目管理的(暂时没用过) 项目管理 看了下面的两篇资料,感觉没啥特色 看了文件目录结构,感觉就是一个标准的mvc框架 看了 ...
- Invalid bound statement (not found)错误的可能原因
其他原因导致此问题解决参考: 1.检查xml文件所在package名称是否和Mapper interface所在的包名 <mapper namespace="me.tspace.pm. ...
- 007——php字符串中的处理函数（六）
<?php /** * 一.addslashes() 在预定义字符串前添加反斜杠 * * stripslashes() 把转义字符串前的反斜杠删除 * get_magic_quotes_gpc ...
- 3d世界是怎样呈现到屏幕上的
要把一个3d物体呈现在屏幕上,要经过一系列的步骤. 描述3d世界 把3d世界绘制在二维屏幕上 如何描述一个3D世界? 数学家早就给出了3D世界的模型,我们日常最熟悉的3维坐标系就是一个欧几里得空间(线 ...
- ESET Smart Security – 免费90天（sv）
Eset 活动很多,还有beta测试,几乎可以免费使用Eset.萨尔瓦多.免费活动,3个月免费ESS/EAV活动地址: 点此进入 填写表格,给你免费3个月的 ESS\EAV 许可证.官方网站: 点此 ...
- Beta阶段第2周/共2周 Scrum立会报告+燃尽图 09
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2389] 版本控制:https://git.coding.net/liuyy08 ...
- 20181009-2 选题 Scrum立会报告+燃尽图（01）
Scrum立会报告+燃尽图(01)选题 此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2190 一.小组介绍 组长:刘莹莹 ...
- CIE-LUV是什么颜色特征
参考文献:维基百科 a simple-to-compute transformation of the 1931 CIE XYZ color space, but which attempted pe ...
- BZOJ4978: [Lydsy1708月赛]泛化物品（乱搞）
4978: [Lydsy1708月赛]泛化物品 Time Limit: 5 Sec Memory Limit: 256 MBSubmit: 220 Solved: 70[Submit][Statu ...