[TOC]
# 样式
## 直接修改样式表
通过 `document.styleSheets` 获取样式表
```javascript
var styles = document.styleSheets;
for(var i in styles){
styles[i].disabled = true; // 修改样式
}
```
## 位置
### 屏幕坐标
通过 `screenX` 和 `screenY` 属性来获取屏幕坐标。屏幕坐标是一种以计算机显示器的左上角为原点的坐标系。
### 窗口坐标
通过 `clientX` 和 `clientY` 属性来获取窗口坐标。窗口坐标是一种以浏览器的显示范围的左上角为原点的坐标系。这一坐标系与文档、元素的滚动情况无关，其坐标值仅由内容的显示位置决定。
### 文档坐标
通过 `pageX` 和 `pageY` 属性来获取元素在文档中的位置。文档坐标是一种以文档页面的左上角为原点的坐标系。与窗口坐标不同，其坐标值与显示位置无关，是由元素在整个文档中的位置决定的。IE 8及更早的版本无法使用这一坐标。
### 在特定元素内的相对坐标
```javascript
function onclick(event){
var x = event.clientX; // 窗口坐标系中鼠标指针的 x 坐标
var y = event.clientY; // 窗口坐标系中鼠标指针的 y 坐标
var r = event.target.getBoundingClientRect(); // 窗口坐标系中被点击元素的范围信息
x -= r.left; // 鼠标指针在被点击元素内部的 x 坐标
y -= r.top; // 鼠标指针在被点击元素内部的 y 坐标
}
```
## AJAX
### XMLHttpRequest 对象的创建
```javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status === 200){
alert(xhr.responseText);
}
}
}
xhr.open('GET', 'http://xxx');
xhr.send(null);
```
readyState 的含义
readyState | 含义
---|---
0 | open() 尚未被调用
1 | send() 尚未被调用
2 | 服务器尚未返回响应
3 | 正在接收来自服务器的响应
4 | 完成了对来自服务器的响应的接收
### 同步通信
同步通信的话，就不需要对 `onreadystatechange` 事件来处理程序进行设定。在执行了 `send()` 之后该处理将会进入待机状态，只要在 `send()` 之后继续书写对响应的处理操作即可。
### 取消请求
```javascript
var xhr = new XMLHttpRequest();
xhr.abort(); // 取消请求
```
### 跨源限制
对源不用的通信进行限制。源指的是由URL的协议、主机名、端口号所构成的元素。
### JSONP
JSONP 是 JSON with Padding 的简称。这里的 Padding 指的是向 JSON 数据中添加函数名。
通过将 `script` 标签的 `src` 属性指定为其它域中的 JavaScript 文件并将其载入，如果动态创建 `script` 标签的话，就能实现对其他域中的数据的动态读取。
```javascript
function foo(json){
console.log(json)
}
function loadData(){
var elem = document.createElement('script');
elem.src = 'http://api.example.com/some-data&callback=foo';
document.getElementByTagName('head')[0].append(elem);
}
```
JSONP 无法在 POST 请求中使用
### window.postMessage
可以通过 `window.postMessage` 实现安全的跨源通信
```javascript
var frame = document.getElementById("gaFrame");
document.body.onclick=function(){
var sendData={
"name":"deals_list",
"event":"deals_click",
"e_data":"这是发送的数据"
}
frame.contentWindow.postMessage(sendData,"*")
}
var OnMessage = function(e) {
var data=e.data;
ga('send', 'pageview',"/"+data);
}
function init() {
if (window.addEventListener) { // all browsers except IE before version 9
window.addEventListener("message", OnMessage, false);
} else {
if (window.attachEvent) { // IE before version 9
window.attachEvent("onmessage", OnMessage);
}
}
};
init();
```
### XMLHttpRequest Level 2
要进行跨源通信就必须得到服务器端的许可。所以要在响应中包含 Access-Control-Allow-Origin 这一 HTTP 头部。默认不发送 Cookie，要发送 Cookie 的话要将 withCredentials 设置为 true
