2011-03-29 2 views
120

मैं वर्तमान में एक प्रोजेक्ट पर काम कर रहा हूं जहां मेरा HTML पर कोई नियंत्रण नहीं है कि मैं सीएसएस शैलियों को लागू कर रहा हूं। और HTML को बहुत अच्छी तरह से लेबल नहीं किया गया है, इस अर्थ में कि तत्वों के बीच अंतर करने के लिए पर्याप्त आईडी और कक्षा घोषणाएं नहीं हैं।क्या मैं एक तत्व नाम पर एक सीएसएस शैली लागू कर सकता हूं?

तो, मैं ऐसे तरीकों की तलाश कर रहा हूं जिनके लिए मैं उन वस्तुओं पर शैलियों को लागू कर सकता हूं जिनके पास आईडी या क्लास विशेषता नहीं है।

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

वहाँ एक रास्ता मैं पर नाम = "goButton" आधारित शैली लागू कर सकते हैं:

कभी कभी, प्रपत्र आइटम एक "नाम" या "मूल्य" विशेषता है? "मूल्य" के बारे में क्या?

यह ऐसी चीज है जो खोजना मुश्किल है क्योंकि Google खोज को सभी प्रकार के उदाहरण मिलेंगे जिनमें वेब पेजों में "नाम" और "मान" जैसे विस्तृत शब्द दिखाई देंगे।

मुझे संदेह है कि उत्तर का कोई जवाब नहीं है ... लेकिन शायद किसी के पास एक चालाक हैक है?

किसी भी सलाह की सराहना की जाएगी।

उत्तर

180

आप विशेषता चयनकर्ता, input[name="goButton"] { } का उपयोग कर सकते हैं। ध्यान रखें कि यह आईई 6 में समर्थित नहीं है।

अपडेट: 2016 में आप आईई 6 मर चुके हैं, इसलिए आप उन्हें जितना चाहें उतना अधिक उपयोग कर सकते हैं। http://quirksmode.org/css/selectors/

http://reference.sitepoint.com/css/attributeselector

17

आप उपयोग कर सकते हैं चयनकर्ताओं विशेषता पर वे IE6 में काम नहीं करेगा मेडर की तरह कहा, कि यद्यपि के लिए जावास्क्रिप्ट समाधान कर रहे हैं। 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

अगर मैं सही तो अपने प्रश्न समझ में, अलग-अलग तत्व के

शैली हाँ, आप सेट कर सकते हैं, अगर उसके आईडी या नाम उपलब्ध है,

उदाहरण

आईडी उपलब्ध तो यू की तरह तत्व पर नियंत्रण, प्राप्त कर सकते हैं

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

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

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

बाकी अगर नाम तो उपलब्ध यू की तरह तत्व पर नियंत्रण प्राप्त कर सकते है,

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

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

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

क्या आपने jQuery का उपयोग करने की संभावना का पता लगाया है? इसमें एक बहुत ही पहुंच चयनकर्ता मॉडल है (सीएसएस के सिंटैक्स में समान) और यहां तक ​​कि यदि आपके तत्वों के पास आईडी नहीं है, तो आप माता-पिता -> बच्चे -> पोते के संबंधों का उपयोग करके उन्हें चुनने में सक्षम होना चाहिए। एक बार जब आप उन्हें चुन लेते हैं, तो एक बहुत ही सरल विधि कॉल (मैं सही नाम भूल जाता हूं) जो आपको तत्वों को सीएसएस शैली लागू करने की अनुमति देता है।

यह उपयोग करना आसान और बोनस के रूप में होना चाहिए, तो आप अधिकतर क्रॉस-प्लेटफ़ॉर्म संगत होंगे।

43

पाठ इनपुट उदाहरण

input[type=text] {  
width: 150px; 
} 
input[name=myname] {  
width: 100px; 
}  
6
भविष्य Googlers, FYI करें, @meder द्वारा जवाब में विधि, एक नाम विशेषता है कि किसी भी तत्व के साथ इस्तेमाल किया जा सकता के लिए

, तो देता है नाम के साथ थेरेस कहना एक xyz तो आप नियम का उपयोग बेल्ज के रूप में कर सकते हैं।

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

name विशेषता निम्नलिखित तत्वों पर इस्तेमाल किया जा सकता:

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

यह वास्तव में प्रश्न में कुछ भी नहीं जोड़ता है। यदि आप वास्तव में – Isaac

+1

महान अतिरिक्त जानकारी चाहते थे, तो 'नाम' विशेषता कुछ भी हो सकती है, thx! –

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 

फिर आप इन संग्रहों के माध्यम से लूप पाया तत्वों पर संचालित करने के लिए कर सकते हैं।