正在加载...
正在加载...
document.getElementById('intro').style.color = '#FF0000';var myDocument = document;
var myIntro = myDocument.getElementById('intro');
var myIntroStyles = myIntro.style;
// 现在，我们可以设置颜色了:
myIntroStyles.color = '#FF0000';
myIntroStyles.padding = '2px 3px 0 3px';
myIntroStyles.backgroundColor = '#FFF';
myIntroStyles.marginTop = '20px';
myIntroStyles.padding-top = '10em';
// 产生语法错误：
// 在JavaScript里横线-是减法操作符
// 而且也没有这样的属性名称
function changeStyle(elem, property, val) {
elem.style[property] = val; // 使用[]来访问属性
}
// 使用上述的函数：
var myIntro = document.getElementById('intro'); // 获取intro文本对象
changeStyle(myIntro, 'color', 'red');
var myIntro = document.getElementById('intro');
// 替换当前的内容
myIntro.innerHTML = 'New content for the <strong>amazing</strong> paragraph!';
// 添加内容到当前的内容里
myIntro.innerHTML += '... some more content...';
var myIntro = document.getElementById('intro');
// 添加内容
var someText = 'This is the text I want to add';
var textNode = document.createTextNode(someText);
myIntro.appendChild(textNode);
var myIntro = document.getElementById('intro');
// 添加新连接到文本节点
// 首先，创建新连接元素
var myNewLink = document.createElement('a'); // <a/>
myNewLink.href = 'http://google.com'; // <a href="http://google.com"/>
myNewLink.appendChild(document.createTextNode('Visit Google'));
// <a href="http://google.com">Visit Google</a>
// 将内容附件到文本节点
myIntro.appendChild(myNewLink);
// 'Target'是DOM里已经存在的元素
// 'Bullet'是要插入的新元素
function insertAfter(target, bullet) {
target.nextSibling ?
target.parentNode.insertBefore(bullet, target.nextSibling)
: target.parentNode.appendChild(bullet);
}
// 使用了3目表达式:
// 格式：条件?条件为true时的表达式：条件为false时的表达式
<!-- HTML -->
<button id="my-button">Click me!</button>
// JavaScript:
var myElement = document.getElementById('my-button');
// 事件处理句柄:
function buttonClick() {
alert('You just clicked the button!');
}
// 注册事件
myElement.onclick = buttonClick;
<button onclick="return buttonClick()">Click me!</button>
// 格式：target.addEventListener( type, function, useCapture );
// 例子:
var myIntro = document.getElementById('intro');
myIntro.addEventListener('click', introClick, false);
// 格式: target.attachEvent ( 'on' + type, function );
// 例子:
var myIntro = document.getElementById('intro');
myIntro.attachEvent('onclick', introClick);
function introClick() {
alert('You clicked the paragraph!');
}
function addEvent(elem, type, fn) {
if (elem.attachEvent) {
elem.attachEvent('on' + type, fn);
return;
}
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
}
}
function removeEvent(elem, type, fn) {
if (elem.detachEvent) {
elem.detachEvent('on' + type, fn);
return;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, fn, false);
}
}
var myIntro = document.getElementById('intro');
addEvent(myIntro, 'click', function () {
alert('YOU CLICKED ME!!!');
});
// 注意：前提是我们已经定于好了addEvent/removeEvent函数
// (定义好了才能使用哦)
var myIntro = document.getElementById('intro');
addEvent(myIntro, 'click', oneClickOnly);
function oneClickOnly() {
alert('WOW!');
removeEvent(myIntro, 'click', oneClickOnly);
}
addEvent(myIntro, 'click', function () {
alert('WOW!');
removeEvent(myIntro, 'click', arguments.callee);
});
function myEventHandler() {
this.style.display = 'none';
}
// 正常工作，this是代表该元素
myIntro.onclick = myEventHandler;
// 正常工作，this是代表该元素
myIntro.addEventListener('click', myEventHandler, false);
// 不正常，这时候的this是代表Window对象
myIntro.attachEvent('onclick', myEventHandler);
function myEventHandler(e) {
// 注意参数e
// 该函数调用的时候e是event对象（W3C实现）
// 兼容IE的代码
e = e || window.event;
// 现在e就可以兼容各种浏览器了
}
// 这里可以自由地绑定事件了
if (!e) {
e = window.event;
} // 没有else语句，因为e在其它浏览器已经定义了
function myEventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
function myParagraphEventHandler(e) {
e = e || window.event;
// 停止向上冒泡
if (e.stopPropagation) {
// W3C实现
e.stopPropagation();
} else {
// IE实现
e.cancelBubble = true;
}
}
// 使用我们自定义的addEvent函数将myParagraphEventHandler绑定到click事件上：
addEvent(document.getElementsByTagName('p')[0], 'click', myParagraphEventHandler);
var myTable = document.getElementById('my-table');
myTable.onclick = function () {
// 处理浏览器兼容
e = e || window.event;
var targetNode = e.target || e.srcElement;
// 测试如果点击的是TR就触发
if (targetNode.nodeName.toLowerCase() === 'tr') {
alert('You clicked a table row!');
}
}