Skip to content

Commit 05c20a5

Browse files
author
banyaner
committed
调整博客布局
1 parent c3fe8a6 commit 05c20a5

File tree

1 file changed

+33
-21
lines changed

1 file changed

+33
-21
lines changed

_posts/2015-07-29-window-event.markdown

+33-21
Original file line numberDiff line numberDiff line change
@@ -28,46 +28,58 @@ FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)
2828
####innerText的使用
2929

3030
FF不支持innerText,它支持textContent来实现innerText,不过textContent没有像innerText一样考虑元素的display方式,所以不完全与IE兼容。如果不用textContent,字符串里面不包含HTML代码也可以用innerHTML代替。
31-
```
31+
3232
if(document.all){
33+
3334
document.getElementById('element').innerText = "mytext";
35+
3436
} else{
37+
3538
document.getElementById('element').textContent = "mytext";
3639
}
37-
```
40+
3841

3942
####获取鼠标指针的位置
4043

4144
计算出鼠标指针的位置对你来说可能是非常少见的,不过当你需要的时候,在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的,也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时,必须指出的是结果相对于Firefox,IE会有更在的不同,这种方法本身就是有BUG的。
4245
在IE中这样写:
43-
```
46+
4447
var myCursorPosition = [0, 0];
4548

4649
myCursorPosition[0] = event.clientX;
4750

4851
myCursorPosition[1] = event.clientY;
49-
```
52+
53+
5054
在Firefox中这样写:
51-
```
55+
56+
5257
var myCursorPosition = [0, 0];
5358

5459
myCursorPosition[0] = event.pageX;
5560

5661
myCursorPosition[1] = event.pageY;
57-
```
62+
5863

5964
####获取可见区域、窗口的大小
6065

61-
有时,我们会需要找到浏览器的可视位置的大小,通常我们称之为"可见区域"。
66+
有时,我们会需要找到浏览器的可视位置的大小,通常我们称之为"可见区域"。
67+
6268
在IE中这样写:
69+
70+
{%highlight ruby%}
6371
var myBrowserSize = [0, 0];
6472
myBrowserSize[0] = document.documentElement.clientWidth;
6573
myBrowserSize[1] = document.documentElement.clientHeight;
74+
{%endhighlight%}
75+
6676
在Firefox中这样写:
77+
78+
{%highlight ruby%}
6779
var myBrowserSize = [0, 0];
6880
myBrowserSize[0] = window.innerWidth;
6981
myBrowserSize[1] = window.innerHeight;
70-
82+
{%endhighlight%}
7183

7284
####CSS "float" 值
7385

@@ -83,32 +95,32 @@ document.getElementById("header").style.cssFloat = "left";
8395

8496
JavaScript可以使用object.style.property句法,方便地在外部访问和修改某个CSS样式,但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的"推算"样式,我们可以使用下面的代码:
8597
在IE中这样写:
86-
```
87-
var myObject = document.getElementById("header");
8898

99+
{% highlight ruby%}
100+
var myObject = document.getElementById("header");
89101
var myStyle = myObject.currentStyle.backgroundColor;
90-
```
102+
{% endhighlight %}
103+
91104
在Firefox中这样写:
92-
```
93-
var myObject = document.getElementById("header");
94105

106+
{% highlight ruby%}
107+
var myObject = document.getElementById("header");
95108
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
96-
97109
var myStyle = myComputedStyle.backgroundColor;
98-
```
110+
{% endhighlight %}
99111

100112
####访问元素的"class"
101113

102114
"class"是JavaScript的一个保留字,在这两个浏览器中我们使用如下句法来访问"class"。
103115
在IE中这样写:
104-
```
116+
{% highlight ruby %}
105117
var myObject = document.getElementById("header");
106-
107118
var myAttribute = myObject.getAttribute("className");
108-
```
119+
{% endhighlight %}
120+
109121
在Firefox中这样写:
110-
```
111-
var myObject = document.getElementById("header");
112122

123+
{% highlight ruby%}
124+
var myObject = document.getElementById("header");
113125
var myAttribute = myObject.getAttribute("class");
114-
```
126+
{% endhighlight %}

0 commit comments

Comments
 (0)