地址欄上的一段語句,改變頁面的風(fēng)格。(教程)
更新時(shí)間:2008年04月02日 18:23:26 作者:
地址欄中的js改變頁面的風(fēng)格代碼
大家可以先把下面這段語句粘貼到地址欄,然后回車,看看效果。
javascript:with(document.body){background="";bgColor="#779966";text="#bb4400"};void(document.styleSheets[0].addRule("TD","border:1 solid black;background-color:#eef9ee!important"))
下面是解說:
1.javascript:url
偽url技術(shù)。它適用于所有包括href和src屬性的標(biāo)記:假如一個(gè)屬性能接收url作為它的值,它就可以接收這個(gè)javascript:url ,地址欄相當(dāng)于location.href,所以也不例外咯。:)
2.返回值
多數(shù)js語句會(huì)有返回值,這里我們并不需要返回值,以免它傳遞給href屬性,使location.href起作用。
可以用alert這個(gè)不會(huì)產(chǎn)生返回值,但又會(huì)計(jì)算表達(dá)式的方法來達(dá)到我們的目的:把語句作為alert的參數(shù),由alert來執(zhí)行。
但是用alert會(huì)彈出計(jì)算的最終結(jié)果(即語句段最終的返回值),我們并不需要彈出框,只需要語句靜靜地執(zhí)行,并且沒有返回值。void運(yùn)算符正是我們所需要的。
3.再談返回值
在順序執(zhí)行的語句段中,如果每一句都有返回值,而某一個(gè)屬性(比如href)只能接收一個(gè)返回值,它會(huì)接收哪一個(gè)返回值呢?答案是最后一個(gè)。因此,我們只需在最后一句加上void就行了。
4.with語句
with語句可以為用大括號(hào)括起來的一段語句段設(shè)定默認(rèn)對(duì)象,以減少代碼量。上面的with(document.body){background="";bgColor="#779966";text="#bb4400"}
即相當(dāng)于:
document.body.background=""
document.body.bgColor="#779966"
document.body.text="#bb4400"
5.為已定義的樣式表新增規(guī)則
document.styleSheets[0].addRule("TD","border:1 solid black")
上面這段語句給頁面中的第一個(gè)樣式表對(duì)象增加一個(gè)規(guī)則:讓所有的表格單元帶上一個(gè)象素寬的黑色實(shí)線邊框。
styleSheets是頁面上所有<style></style>和<link rel=stylesheet type=text/css href=***.css>元素的集合。styleSheets[0]是指第一個(gè)樣式表元素。
addRule()方法用來給樣式表對(duì)象插入規(guī)則。第一個(gè)參數(shù)是selector,第二個(gè)參數(shù)是對(duì)selector的定義。
6.樣式表的!important屬性
凡是具有!important屬性的樣式,在頁面中具有優(yōu)先權(quán)。舉例:
<style>
p {color:red!important}
</style>
<p style="color:green">這里的文字是紅色的。</p>
好了,開頭的那段語句就包括這些知識(shí)點(diǎn),大家有沒有在這基礎(chǔ)之上的進(jìn)一步的創(chuàng)新,讓我學(xué)習(xí)學(xué)習(xí)?鼓勵(lì)創(chuàng)新哦。:)
javascript:with(document.body){background="";bgColor="#779966";text="#bb4400"};void(document.styleSheets[0].addRule("TD","border:1 solid black;background-color:#eef9ee!important"))
下面是解說:
1.javascript:url
偽url技術(shù)。它適用于所有包括href和src屬性的標(biāo)記:假如一個(gè)屬性能接收url作為它的值,它就可以接收這個(gè)javascript:url ,地址欄相當(dāng)于location.href,所以也不例外咯。:)
2.返回值
多數(shù)js語句會(huì)有返回值,這里我們并不需要返回值,以免它傳遞給href屬性,使location.href起作用。
可以用alert這個(gè)不會(huì)產(chǎn)生返回值,但又會(huì)計(jì)算表達(dá)式的方法來達(dá)到我們的目的:把語句作為alert的參數(shù),由alert來執(zhí)行。
但是用alert會(huì)彈出計(jì)算的最終結(jié)果(即語句段最終的返回值),我們并不需要彈出框,只需要語句靜靜地執(zhí)行,并且沒有返回值。void運(yùn)算符正是我們所需要的。
3.再談返回值
在順序執(zhí)行的語句段中,如果每一句都有返回值,而某一個(gè)屬性(比如href)只能接收一個(gè)返回值,它會(huì)接收哪一個(gè)返回值呢?答案是最后一個(gè)。因此,我們只需在最后一句加上void就行了。
4.with語句
with語句可以為用大括號(hào)括起來的一段語句段設(shè)定默認(rèn)對(duì)象,以減少代碼量。上面的with(document.body){background="";bgColor="#779966";text="#bb4400"}
即相當(dāng)于:
document.body.background=""
document.body.bgColor="#779966"
document.body.text="#bb4400"
5.為已定義的樣式表新增規(guī)則
document.styleSheets[0].addRule("TD","border:1 solid black")
上面這段語句給頁面中的第一個(gè)樣式表對(duì)象增加一個(gè)規(guī)則:讓所有的表格單元帶上一個(gè)象素寬的黑色實(shí)線邊框。
styleSheets是頁面上所有<style></style>和<link rel=stylesheet type=text/css href=***.css>元素的集合。styleSheets[0]是指第一個(gè)樣式表元素。
addRule()方法用來給樣式表對(duì)象插入規(guī)則。第一個(gè)參數(shù)是selector,第二個(gè)參數(shù)是對(duì)selector的定義。
6.樣式表的!important屬性
凡是具有!important屬性的樣式,在頁面中具有優(yōu)先權(quán)。舉例:
<style>
p {color:red!important}
</style>
<p style="color:green">這里的文字是紅色的。</p>
好了,開頭的那段語句就包括這些知識(shí)點(diǎn),大家有沒有在這基礎(chǔ)之上的進(jìn)一步的創(chuàng)新,讓我學(xué)習(xí)學(xué)習(xí)?鼓勵(lì)創(chuàng)新哦。:)
相關(guān)文章
js使用循環(huán)清空某個(gè)div中的input標(biāo)簽值
清空div中input標(biāo)簽值的方法有很多,下面為大家介紹下使用循環(huán)清空某個(gè)div中的input標(biāo)簽值的具體實(shí)現(xiàn)2014-09-09一文搞懂JavaScript中bind,apply,call的實(shí)現(xiàn)
bind、call和apply都是Function原型鏈上面的方法,因此不管是使用function聲明的函數(shù),還是箭頭函數(shù)都可以直接調(diào)用。本文就帶你看看如何實(shí)現(xiàn)bind、call和apply2022-06-06JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(七) ECMAScript中的語句
ECMAScript中的語句,學(xué)習(xí)js的朋友可以參考下2012-02-02詳解將微信小程序接口Promise化并使用async函數(shù)
這篇文章主要介紹了詳解將微信小程序接口Promise化并使用async函數(shù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08select隱藏選中值對(duì)應(yīng)的id,顯示其它id的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猻elect隱藏選中值對(duì)應(yīng)的id,顯示其它id的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08javascript中通過arguments參數(shù)偽裝方法重載
面向?qū)ο蟮母呒?jí)語言中,都有方法的重載,在js中可以通過arguments這個(gè)參數(shù)來偽裝成函數(shù)重載,具體如下2014-10-10