web-dev-qa-db-ger.com

Kann ich einen CSS-Stil auf einen Elementnamen anwenden?

Ich arbeite zurzeit an einem Projekt, bei dem ich keine Kontrolle über den HTML-Code habe, auf den ich CSS-Stile anwende. Und HTML ist nicht sehr gut beschriftet, da es nicht genügend ID- und Klassendeklarationen gibt, um zwischen Elementen zu unterscheiden.

Ich suche also nach Möglichkeiten, wie ich Stile auf Objekte anwenden kann, die weder eine ID noch ein Klassenattribut haben.

Manchmal haben Formularelemente ein Attribut "Name" oder "Wert":

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

Gibt es eine Möglichkeit, einen Stil basierend auf name = "goButton" anzuwenden? Was ist mit "Wert"?

Das ist schwer zu finden, da bei einer Google-Suche alle möglichen Fälle gefunden werden, in denen allgemeine Begriffe wie "Name" und "Wert" auf Webseiten erscheinen.

Ich vermute, die Antwort ist nein ... aber vielleicht hat jemand einen cleveren Hack?

Jeder Rat wäre sehr dankbar.

144
Questioner

Sie können den Attributselektor input[name="goButton"] { } verwenden. Beachten Sie, dass es in IE6 nicht unterstützt wird.

Update: 2016 können Sie sie beliebig nutzen, da der IE6 tot ist. http://quirksmode.org/css/selectors/

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

226
meder omuraliev

Texteingabebeispiel

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

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

Sie können Attributselektoren verwenden, sie funktionieren jedoch nicht in IE6, wie Meder sagte. Es gibt Javascript-Problemumgehungen für dieses Problem. Check Selectivizr

Weitere Details zu Attributselektoren: 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 }
17
ChrisR

Für zukünftige Googler kann FYI, die Methode in der Antwort von @meder, für jedes Element verwendet werden, das über ein Namensattribut verfügt. Nehmen wir also an, es gibt einen <iframe> mit dem Namen xyz. Dann können Sie die Regel wie folgt verwenden.

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

Das name-Attribut kann für die folgenden Elemente verwendet werden:

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

Wenn ich deine Frage richtig verstehe,

Ja, Sie können den Stil eines einzelnen Elements festlegen, wenn dessen ID oder Name verfügbar ist.

z.B. 

Wenn eine ID verfügbar ist, kann man die Kontrolle über das Element erhalten, wie

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

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

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

sonst wenn Name verfügbar ist, können Sie die Kontrolle über das Element übernehmen, wie

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

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

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

Die Verwendung von [name=elementName]{} ohne Tag funktioniert ebenfalls .. .. Sie wirkt sich auf alle Elemente mit diesem Namen aus.

Zum Beispiel:

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

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

Dies ist der perfekte Job für die Abfrageauswahl ...

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

Sie können dann diese Sammlungen durchlaufen, um die gefundenen Elemente zu bearbeiten.

0
user4723924