क्या मैं एक तत्व नाम के लिए सीएसएस शैली लागू कर सकता हूं?

Question

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

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

कभी-कभी, प्रपत्र आइटम में "नाम" या "मान" विशेषता होती है:

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

क्या कोई ऐसा तरीका है जो मैं नाम के आधार पर एक शैली लागू कर सकता हूं = "goButton"? "मूल्य" के बारे में क्या?

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

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

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

Answer 1

आप विशेषता चयनकर्ता का उपयोग कर सकते हैं,

input[name="goButton"] {
  background: red;
}

<input name="goButton">

ध्यान रखें कि यह IE6 में समर्थित नहीं है।

अद्यतन: 2016 में आप बहुत अधिक उपयोग कर सकते हैं जैसा आप चाहते हैं, क्योंकि IE6 मर चुका है। http://quirksmode.org/css/selectors/

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

Answer 2

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

input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}

<input type="text">
<br>
<input type="text" name="myname">

Answer 3

आप विशेषता चयनकर्ताओं का उपयोग कर सकते हैं, लेकिन वे 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 }

Answer 4

भविष्य Googler के लिए, FYI करें, @meder द्वारा जवाब में विधि, एक नाम विशेषता है कि किसी भी तत्व के साथ इस्तेमाल किया जा सकता है, तो कहते हैं थेरेस एक की सुविधा देता है <iframe>नाम के साथ xyzतो आप belows के रूप में नियम का उपयोग कर सकते हैं।

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

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

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

Comments

यह वास्तव में सवाल के लिए कुछ भी नहीं जोड़ता है। nameयदि आप वास्तव में चाहते हैं तो इस विशेषता को किसी भी चीज़ पर रखा जा सकता है

— इसहाक

Answer 5

अगर मैं आपके सवाल को सही समझूं,

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

जैसे

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

<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');

Answer 6

[name=elementName]{}पहले टैग के बिना उपयोग करना भी काम करेगा। यह इस नाम के साथ सभी तत्वों को प्रभावित करेगा।

उदाहरण के लिए:

[name=test] {
  width: 100px;
}

<input type=text name=test>
<div name=test></div>

Answer 7

यह क्वेरी चयनकर्ता के लिए एकदम सही काम है ...

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

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

Answer 8

यदि मामले में आप इनपुट में नाम का उपयोग नहीं कर रहे हैं, लेकिन अन्य तत्व, तो आप वहां अन्य तत्व को विशेषता के साथ लक्षित कर सकते हैं।

    [title~=flower] {
      border: 5px solid yellow;
    }

    <img src="klematis.jpg" title="klematis flower" width="150" height="113">
    <img src="img_flwr.gif" title="flower" width="224" height="162">
    <img src="img_flwr.gif" title="flowers" width="224" height="162">

इसकी मदद की उम्मीद है। धन्यवाद

Answer 9

input[type=text] {
  width: 150px;
  length: 150px;
}

input[name=myname] {
  width: 100px;
length: 150px;
}

<input type="text">
<br>
<input type="text" name="myname">

Comments

यह कोड क्या करता है, इसके बारे में कुछ विवरण जोड़ने का प्रयास करें। यह नाटकीय रूप से आपके उत्तर की गुणवत्ता में सुधार कर सकता है।

— क्रिस्टोफर मूर

Answer 10

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

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