1.操作屬性
DOM是為了操作文檔(網(wǎng)頁(yè))的API纪铺,document是它的一個(gè)對(duì)象
BOM是為了操作瀏覽器的API戈鲁,window是它的一個(gè)對(duì)象
常用BOM對(duì)象還有:alert料按、定時(shí)器等
*/
//整個(gè)文檔加載完之后執(zhí)行一個(gè)匿名函數(shù)
window.onload = function(){
document.getElementById('div1').title = "我看到了篡殷!";
//變量oA代表整個(gè)a標(biāo)簽
var oA = document.getElementById('link1');
oA.;
oA.title = "跳轉(zhuǎn)到騰訊網(wǎng)"
alert(oA.id);
alert(oA.title);
2.換膚
<title>js換膚</title>
css/1.css"id="link1">
window.onload = function(){
var oLink = document.getElementById('link1');
oLink.href = "css/2.css";
alert(oLink.id);
}
網(wǎng)頁(yè)換膚原理:需要準(zhǔn)備不同的膚色的css的樣式表杰妓,
涉及到:
點(diǎn)擊事件(onclick)
onclick= “onmouseover”藻治、……move、……out這些方法巷挥。
這些方法方別是鼠標(biāo)的不同的操作方桩卵。
id屬性,所有的都可以有id屬性倍宾。
所以:要求準(zhǔn)備:
1雏节、需要哪些樣式,點(diǎn)擊之后會(huì)改變href
2高职、需要的屬性添加事件钩乍,切換
js
fucntion 是函數(shù)的關(guān)鍵字
·js中的函數(shù)賦值:可以匿名函數(shù)和之間賦值函數(shù)
window.onload()
這個(gè)是加載網(wǎng)頁(yè)的方法,我們是可以通過寫這個(gè)方法怔锌,才會(huì)調(diào)用下面的屬性寥粹,因?yàn)楸涔琷s的原因是一行一行的代碼進(jìn)行執(zhí)行的。
所以要先將頁(yè)面的所有對(duì)象或者屬性加載了之后才可以使用涝涤。
所以這個(gè)方法在頁(yè)面上會(huì)經(jīng)常用到 媚狰。
document.getElementById()這個(gè)方法來獲取相關(guān)的網(wǎng)頁(yè)屬性,也就是通過Id這個(gè)屬性兩獲取的阔拳,通過方法的名稱我們就可以知道了這個(gè)方法的含義崭孤。
屬性 操作:
1、obj.style.display = @”block”;對(duì)塊進(jìn)行操作
2衫生、賦值
3裳瘪、引用樣式,id都會(huì)是名稱一致
(特殊:class 在引用的時(shí)候?yàn)閏lassName)
obj.className = “類的樣式”;
附加:
sublime中:
快捷鍵:
ctrl+Y 和ctrl+z的使用罪针,他們朝著相反的方向顯示效果彭羹。
3.js操作style屬性
window.onload = function() {
var oDiv = document.getElementById('div1');
/*style屬性中的樣式屬性,沒有"-"號(hào)的泪酱,寫法相同*/
oDiv.style.color = 'red';
oDiv.style.background = 'gold';
/*
style屬性中的樣式屬性派殷,帶"-"號(hào)的需要去掉"-"號(hào),寫成小駝峰式
例如:font-size屬性要寫為fontSize
*/
oDiv.style.fontSize = '30px';
}
3.js操作class
.box01{
width: 200px;
height: 200px;
background-color: gold;
}
.box02{
width: 300px;
height: 300px;
background-color: red;
}
</style>
window.onload = function() {
var oDiv = document.getElementById('div1');
// 由于class是js中的保留關(guān)鍵字墓阀,所以設(shè)置class屬性時(shí)毡惜,要寫為className
oDiv.className = 'box02';
}
4.js中括號(hào)操作屬性
window.onload = function(){
var oDiv = document.getElementById('div1');
//oDiv.style.color = 'red';//red必須加引號(hào),否則會(huì)認(rèn)為它是一個(gè)變量斯撮,引起來會(huì)認(rèn)為它是一個(gè)值经伙,賦值給=號(hào)左邊
var attr = 'color';
// oDiv.style[attr] = 'red';
/* 通過[]操作屬性可以寫變量 */
oDiv['style'][attr] = 'red';
/* 通過innerHTML可以讀寫元素包括的內(nèi)容 */
alert(oDiv.innerHTML);//讀取標(biāo)簽里面包裹的元素,即“這是一個(gè)div元素”
var oDiv2 = document.getElementById('div2');
// oDiv2.innerHTML = '這是第二個(gè)div元素';//向div標(biāo)簽中插入內(nèi)容
oDiv2.innerHTML = "<a ;//向div標(biāo)簽中插入超鏈接標(biāo)簽
/*
document.write和innerHTML的區(qū)別
document.write只能重繪整個(gè)頁(yè)面
innerHTML可以重繪頁(yè)面的一部分
*/
}