2011-03-29 105 views
120

我目前正在研究一個項目,我無法控制我正在使用CSS樣式的HTML。而HTML沒有很好的標記,因爲沒有足夠的id和class聲明來區分元素。我可以將CSS樣式應用於元素名稱嗎?

所以,我正在尋找可以將樣式應用於沒有id或class屬性的對象的方法。

有時候,形式的項目有「名」或「價值」屬性:

<input type="submit" value="Go" name="goButton"> 

有沒有我可以申請基於名稱=「goButton」風格的方式?那麼「價值」呢?

這是很難找到的東西,因爲谷歌搜索會找到各種各樣的實例,其中廣泛的術語,如「名稱」和「價值」將出現在網頁中。

我有點懷疑答案是否定的......但也許有人有一個聰明的黑客?

任何意見將不勝感激。

回答

17

您可以使用屬性選擇,但像MEDER表示,他們不會在IE6中工作,還有JavaScript的解決方法是壽。檢查Selectivizr

更詳細的插入屬性選擇:http://www.css3.info/preview/attribute-selectors/

/* turns all input fields that have a name that starts with "go" red */ 
input[name^="go"] { color: red } 
3

如果我明白你的問題正確的話,

是的,你可以設置單個元素的風格,如果它的ID或名稱可用,

eg

如果ID可用然後ü可以超過元素像控制,

<input type="submit" value="Go" name="goButton"> 

var v_obj = document.getElementsById('goButton'); 

v_obj.setAttribute('style','color:red;background:none'); 

否則,如果名稱可用,則U可以通過元素一樣得到控制,

<input type="submit" value="Go" name="goButton"> 

var v_obj = document.getElementsByName('goButton'); 

v_obj.setAttribute('style','color:red;background:none'); 
-2

你有沒有探討過使用jQuery的可能性?它有一個非常到位的選擇器模型(類似於CSS的語法),即使你的元素沒有ID,你也應該可以使用父 - >子 - >孫的關係來選擇它們。一旦你選擇了它們,就有一個非常簡單的方法調用(我忘記了確切的名稱),它允許你將CSS樣式應用到元素上。

它應該很簡單,作爲獎勵,你很可能會跨平臺兼容。

43

文本輸入實施例

input[type=text] {  
width: 150px; 
} 
input[name=myname] {  
width: 100px; 
}  
6

對於未來的Google,僅供參考,在由@meder答案的方法中,可以與具有名稱屬性的任何元件使用,所以可以讓與名稱說theres一個 xyz然後你可以使用下面的規則。

iframe[name=xyz] {  
    display: none; 
} 

name的屬性可以在下列元素一起使用:

  • <button>
  • <fieldset>
  • <form>
  • <input>
  • <keygen>
  • <map>
  • <meta>
  • <object>
  • <output>
  • <param>
  • <select>
  • <textarea>
+1

這並沒有真正添加任何問題。如果你真的想 – Isaac 2016-10-05 23:25:34

+1

偉大的附加信息,名稱'屬性可以放在任何東西! – 2016-10-28 18:18:02

0

這是查詢選擇完美的工作......

var Set1=document.querySelectorAll('input[type=button]'); // by type 

var Set2=document.querySelectorAll('input[name=goButton]'); // by name 

var Set3=document.querySelectorAll('input[value=Go]'); // by value 

然後,您可以遍歷這些集合上找到的元素進行操作。

相關問題