用cssText可以批量修改style属性

Posted on by
1

今天在练习JS脚本时

想要给一个盒子 设置CSS属性

在没有提前在样式里写好的情况下

一般是这样子添加

假设那盒子的ID等于box

1
2
3
4

var oBox = document.getElementById('box');
oBox.style.width = '200px';
oBox.style.height = '200px';
oBox.style.background = '#FF0000';

但这样子设置的话，显得太繁琐勒，而且会造成浏览器的reflow，影响性能

后来上网找了下发现有个cssText属性，一行代码就搞定

1
2

var oBox = document.getElementById('box');
oBox.style.cssText = ' width:200px;height:300px;background:#FF0000';

图片滚动（左右）

Posted on by
Reply

前几天写了个图片滚动（上下版）的

今天就来个左右版的

实现原理基本一样

只是样式有点不同吧

具体如下，demo在这里

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="author" content="http://www.iceroom.net" />
	<title>无缝图片滚动（左右）</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="js/ice.js"></script>
</head>
<body>
	<div id="scroll" class="scroll">
		<a id="btn-left" class="btn-left" href="javascript:;" title="向左滚动"></a>
		<div class="scroll-pic">
			<ul>
				<li><a href="###"><img src="images/01.png" alt="" /></a></li>
				<li><a href="###"><img src="images/02.png" alt="" /></a></li>
				<li><a href="###"><img src="images/03.png" alt="" /></a></li>
				<li><a href="###"><img src="images/04.png" alt="" /></a></li>
			</ul>
		</div>
		<a id="btn-right" class="btn-right" href="javascript:;" title="向右滚动"></a>
	</div>
</body>
</html>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

*{margin:0;padding:0;}
img{border:0 none;}
a.btn-left:link{
	background:url(../images/arrow.png) no-repeat  0 0;
	width:35px;
	height:35px;
}
a.btn-left:visited{
	background:url(../images/arrow.png) no-repeat  0 0;
	width:35px;
	height:35px;
}
a.btn-left:hover{
	background:url(../images/arrow.png) no-repeat  -35px 0;
	width:35px;
	height:35px;
}
a.btn-left:active{
	background:url(../images/arrow.png) no-repeat  -35px 0;
	width:35px;
	height:35px;
}
a.btn-right:link{
	background:url(../images/arrow.png) no-repeat  0 -35px;
	width:35px;
	height:35px;
}
a.btn-right:visited{
	background:url(../images/arrow.png) no-repeat  0 -35px;
	width:35px;
	height:35px;
}
a.btn-right:hover{
	background:url(../images/arrow.png) no-repeat  -35px -35px;
	width:35px;
	height:35px;
}
a.btn-right:active{
	background:url(../images/arrow.png) no-repeat  -35px -35px;
	width:35px;
	height:35px;
}
 
 
.scroll{
	width:900px;
	margin:30px auto;
	padding:5px 0;
	position:relative;
	border:1px solid #ccc;
}
.btn-left{
	background:url(../images/arrow.png) no-repeat  0 0;
	display:block;
	width:35px;
	height:35px;
	position:absolute;
	top:60px;
	left:5px;
}
.btn-right{
	background:url(../images/arrow.png) no-repeat  0 -35px;
	display:block;
	width:35px;
	height:35px;
	position:absolute;
	top:60px;
	right:5px;
}
.scroll-pic{
	width:800px;
	height:156px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
.scroll-pic ul{
	list-style:none;
	position:absolute;
	top:0;
	left:0;
}
.scroll-pic ul li{
	float:left;
	width:250px;
	padding:0 5px;
}
.scroll-pic ul li a{
	display:block;
	width:250px;
	height:150px;
	border:2px solid #fff;
}
.scroll-pic ul li a:hover{
	display:block;
	width:250px;
	height:150px;
	border:2px solid #5d8bf5;
}

JS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

window.onload = function () {
	var oScroll = document.getElementById('scroll');
	var oUl = oScroll.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	var oBtnLeft = document.getElementById('btn-left');
	var oBtnRight = document.getElementById('btn-right');
	var i = 0;
	var iSpeed = -5;
	var timer = null;
 
	oUl.innerHTML += oUl.innerHTML;
	oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
 
	function doMove () {
		oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
 
		if ( oUl.offsetLeft < -oUl.offsetWidth/2 ) {
			oUl.style.left = 0 + 'px';
		}else if ( oUl.offsetLeft > 0 ) {
			oUl.style.left = -oUl.offsetWidth/2 + 'px';
		}
 
	};
 
	timer = setInterval ( doMove,30 );
 
 
	oBtnLeft.onmouseover = function () {
		iSpeed = -5;
	};
 
	oBtnRight.onmouseover = function () {
		iSpeed = 5;
	};
 
	oUl.onmouseover = function () {
		clearInterval(timer);
	};
 
	oUl.onmouseout = function () {
		timer = setInterval ( doMove,30 );
	};
};

div与span的区别

Posted on by
Reply

今早面试时被问到

div与span有什么区别

div 是个块元素、会换行（独占一行）

span是个内联元素、不换行，内容有多宽就占多宽

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>div与span的区别</title>
</head>
<body>
	<div> 我是 DIV-01</div>
	<div> 我是 DIV-02</div>
	<span>我是 SPAN-01</span>
	<span>我是 SPAN-02</span>
</body>
</html>

demo不放了

有兴趣的童鞋麻烦复制、粘贴一下去测试。

 

图片滚动(上下)

Posted on by
1

好几天没写怎么Javascript了

都快忘记是怎么写的了

以前还在学校时

老师们常说好记忆不如烂笔头

现在出来社会向前辈们请教

技术这个东西怎样才快速的提高、提升呢?

回答基本一样

多看书、多练习、多模仿

正如以前老师们所说的

好记忆不如多敲键盘

好了，不扯了进入正题

这是个无缝图片滚动

代码如下：Dome看这里

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="author" content="http://www.iceroom.net" />
	<title>图片滚动（上下）</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="js/ice.js"></script>
</head>
<body>
	<div id="scroll" class="scroll">	
		<a href="javascript:;" class="up" id="up"></a> 				
		<div class="picbox">
			<ul>
				<li><a href="http://www.iceroom.net"><img src="images/01.jpg" alt="图片01" /></a></li>
				<li><a href="http://www.iceroom.net"><img src="images/02.jpg" alt="图片02" /></a></li>
				<li><a href="http://www.iceroom.net"><img src="images/03.jpg" alt="图片03" /></a></li>
				<li><a href="http://www.iceroom.net"><img src="images/04.jpg" alt="图片04" /></a></li>
			</ul>
		</div>	
		<a href="javascript:;" class="down" id="down"></a> 	
	</div>	
</body>
</html>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

*{margin:0;padding:0;}
img{border:0 none;}
ul{list-style:none;}
 
a.up:link{
	text-decoration:none;
	background:url(../images/arrow.png) no-repeat 0 0;
}
a.up:visited{
	text-decoration:none;
	background:url(../images/arrow.png) no-repeat 0 0;
}
a.up:hover{
	text-decoration:none;
	background:url(../images/arrow.png) no-repeat -35px 0;
}
a.up:active{
	text-decoration:none;
	background:url(../images/arrow.png) no-repeat -35px 0;
}
a.down:link{
	text-decoration:none;
	background:url(../images/arrow.png) no-repeat 0 -35px;
}
a.down:visited{
	text-decoration:none;
	background:url(../images/arrow.png) no-repeat 0 -35px;
}
a.down:hover{
	text-decoration:none;
	background:url(../images/arrow.png) no-repeat -35px -35px;
}
a.down:active{
	text-decoration:none;
	background:url(../images/arrow.png) no-repeat -35px -35px;
}
 
 
.scroll{
	width:200px;
	margin:6px auto;
	border:1px solid #ccc;
	padding:5px 0;
}
 
.scroll .up{
	width:33px;
	height:33px;
	background:url(../images/arrow.png) no-repeat 0 0;
	margin:0 auto;
	display:block;
}
.scroll .down{
	width:33px;
	height:33px;
	background:url(../images/arrow.png) no-repeat 0 -35px;
	margin:0 auto;
	display:block;
}
 
.scroll .picbox{
	width:184px;
	height:570px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
.scroll .picbox ul{
	position:absolute;
	top:5px;
	left:0;
}
.scroll .picbox ul li{
	width:184px;
	height:190px;
}
.scroll .picbox ul li a{
	display:block;
	width:180px;
	height:180px;
	border:2px solid white;
}
.scroll .picbox ul li a:hover{
	display:block;
	width:180px;
	height:180px;
	border:2px solid #5d8bf5;
}

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

window.onload = function () {
	var oScroll = document.getElementById('scroll');
	var oUl = oScroll.getElementsByTagName('ul')[0];
	var oLi = oUl.getElementsByTagName('li');
	var oUp = document.getElementById('up');
	var oDown = document.getElementById('down');
	var iSpeed = 0;
	var timer = null;
 
	oUl.innerHTML += oUl.innerHTML;
 
	oUl.style.height = oLi[0].offsetHeight * oLi.length + 'px';
 
	function doMove() {
		oUl.style.top = oUl.offsetTop + iSpeed + 'px';
 
		//判断方向
		if ( oUl.offsetTop < -oUl.offsetHeight/2 ) {
			oUl.style.top = 0 + 'px';
		}	else if ( oUl.offsetTop > 0) {
			oUl.style.top = -oUl.offsetHeight/2 + 'px';
		}
	};
 
	oUp.onmousedown = function () {		
		iSpeed = -5;
		timer = setInterval( doMove,30 );
	};
 
	oUp.onmouseup = function () {
		clearInterval(timer);
	};
 
	oDown.onmousedown = function () {
		iSpeed = 5;
		timer = setInterval( doMove, 30 );
	};
 
	oDown.onmouseup = function () {
		clearInterval(timer);
	};
 
};

PS：欢迎各位批评指教，如有错误请通知我，谢谢。

 

CSS清理浮动方式

Posted on by
Reply

清理浮动有很多种方式，像使用br标签自带的clear属性，使用元素的overflow，使用空标签来设置clear:both;等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。

1
2
3
4
5
6
7
8
9
10
11
12

/*清理浮动*/
.clearfix:after{
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix{
    zoom:1;
}

其原理是，在「高级」浏览器中使用:after伪类在浮动块后面加上一个非display:none;的不可见块状内容来，并给它设置clear:both;来清理浮动。在IE6和7中给浮动块添加haslayout来让浮动块撑高并正常影响文档流。

上面的代码应该是现在主流的清理浮动方式。而现在，Nicolas Gallagher给出了一个更简洁的方案：

1
2
3
4
5
6
7
8
9
10

.cf:before,.cf:after{
    content:" ";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
}

原理还是一样的。使用:after伪类来提供浮动块后的clear:both;不同的是，隐藏这个空白使用的是display:table;。而不是设置visibility:hidden;height:0;font-size:0;这样的hack;

值得注意的是这里中的:before伪类。其实他是来用处理top-margin边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建block formatting context,这样浮动元素上的另而一元素上如果刚有margin-bottom而这个浮动元素刚好有margin-top的话，应该让他们不折叠(虽然这种情况并不常见)。
下面是我自己常用的方式

1
2
3
4
5
6
7
8

.clearfix:after{
    content:"\20";             /* content:" ";=content:"\20"; */
    display:block;
    clear:both;
}
.clearfix{
    zoom:1;
}

信息来源于：sofish