JS獲取頁(yè)面input控件中所有text控件并追加樣式屬性
更新時(shí)間：2013年02月25日 16:03:31 作者：
使用jquery來(lái)在頁(yè)面加載時(shí)獲取頁(yè)面input控件中所有text控件并添加樣式,由于其他方式比較麻煩所以就想通過(guò)在頁(yè)面加載的時(shí)候?qū)⒁膭?dòng)的text找到并添加屬性，感興趣的你可以參考下，希望可以幫助到你
如題，將使用jquery來(lái)在頁(yè)面加載時(shí)獲取頁(yè)面input控件中所有text控件并添加樣式。
以前寫(xiě)過(guò)的頁(yè)面上所使用的text控件width屬性太小需要改動(dòng)，改動(dòng)牽扯頁(yè)面上所有text的屬性，改動(dòng)每個(gè)控件的width感覺(jué)會(huì)很麻煩，所以就想通過(guò)在頁(yè)面加載的時(shí)候?qū)⒁膭?dòng)的text找到并添加屬性。
首先先寫(xiě)了一個(gè)css樣式：
.wid
{
width:205px;
}
在頁(yè)面加載中所寫(xiě)的代碼如下：
$("input[type=text]").addClass("wid"); //獲取input控件中所有type=text的控件 給text文本框添加樣式至此便完成了。
javascript 獲取頁(yè)面控件并追加樣式：
//給select下拉框添加樣式
var g=document.getElementsByTagName("select"); //設(shè)置變量接收所查找到的select控件
for(i=0;i<g.length;i++) //遍歷循環(huán)賦值
{
document.getElementById(g[i].id).style.width="210px"; //附加樣式
}
以前寫(xiě)過(guò)的頁(yè)面上所使用的text控件width屬性太小需要改動(dòng)，改動(dòng)牽扯頁(yè)面上所有text的屬性，改動(dòng)每個(gè)控件的width感覺(jué)會(huì)很麻煩，所以就想通過(guò)在頁(yè)面加載的時(shí)候?qū)⒁膭?dòng)的text找到并添加屬性。
首先先寫(xiě)了一個(gè)css樣式：
復(fù)制代碼 代碼如下:
.wid
{
width:205px;
}
在頁(yè)面加載中所寫(xiě)的代碼如下：
$("input[type=text]").addClass("wid"); //獲取input控件中所有type=text的控件 給text文本框添加樣式至此便完成了。
javascript 獲取頁(yè)面控件并追加樣式：
復(fù)制代碼 代碼如下:
//給select下拉框添加樣式
var g=document.getElementsByTagName("select"); //設(shè)置變量接收所查找到的select控件
for(i=0;i<g.length;i++) //遍歷循環(huán)賦值
{
document.getElementById(g[i].id).style.width="210px"; //附加樣式
}
相關(guān)文章
下面小編就為大家?guī)?lái)一篇js removeChild 方法深入理解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
js、jquery圖片動(dòng)畫(huà)、動(dòng)態(tài)切換示例代碼
這篇文章主要介紹了通過(guò)js、jquery實(shí)現(xiàn)的圖片動(dòng)畫(huà)、圖片動(dòng)態(tài)切換 ,需要的朋友可以參考下2014-06-06
用JavaScript判斷CSS瀏覽器類(lèi)型前綴的兩種方法
不管瀏覽器更新的多快，號(hào)稱(chēng)多么支持標(biāo)準(zhǔn)。廠商不同，他們之間還是有很多差異。我們需要區(qū)分出這些差異，針對(duì)不同的瀏覽器做不同的處理。2015-10-10
JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
結(jié)合?ES6?類(lèi)編寫(xiě)JavaScript?創(chuàng)建型模式
這篇文章主要介紹了結(jié)合ES6類(lèi)編寫(xiě)JavaScript創(chuàng)建型模式，本文開(kāi)始系統(tǒng)性的對(duì)20多種JavaScript?設(shè)計(jì)模式進(jìn)行簡(jiǎn)單概述，然后結(jié)合ES6類(lèi)的方式來(lái)編寫(xiě)實(shí)例代碼展示其使用方式，需要的朋友可以參考一下2022-07-07
JavaScript通過(guò)代碼調(diào)用Flash顯示的方法
這篇文章主要介紹了JavaScript通過(guò)代碼調(diào)用Flash顯示的方法,實(shí)例分析了JavaScript通過(guò)flash插件swfobject.js調(diào)用flash顯示的具體操作技巧,需要的朋友可以參考下2016-02-02
本文對(duì)比分析了javascript中的null和underfined的相同點(diǎn)和不同點(diǎn)，算是一個(gè)小小的總結(jié)，希望對(duì)大家學(xué)習(xí)javascript能夠有所幫助。2015-07-07
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
下面小編就為大家?guī)?lái)一篇獲取input標(biāo)簽的所有屬性的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
告訴你一個(gè)排序算法，也許是最重要的是他們知道 - 快速排序，無(wú)論是在PHP和JavaScript實(shí)現(xiàn)的。雖然這兩種語(yǔ)言之間的代碼看起來(lái)相似，也有一些差異，這表明了語(yǔ)法知識(shí)的重要性！2011-02-02