web-dev-qa-db-fra.com

Puis-je appliquer un style CSS à un nom d'élément?

Je travaille actuellement sur un projet dans lequel je n'ai aucun contrôle sur le code HTML auquel j'applique les styles CSS. Et le code HTML n’est pas très bien étiqueté, en ce sens qu’il n’ya pas assez de déclarations d’identité et de classe pour différencier les éléments.

Je cherche donc des moyens d'appliquer des styles à des objets qui n'ont pas d'attribut id ou class.

Parfois, les éléments de formulaire ont un attribut "nom" ou "valeur":

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

Est-il possible d'appliquer un style basé sur name = "goButton"? Qu'en est-il de "valeur"?

C'est le genre de chose qui est difficile à trouver car une recherche Google trouvera toutes sortes d'instances dans lesquelles des termes généraux tels que "nom" et "valeur" apparaîtront dans les pages Web.

Je soupçonne en quelque sorte que la réponse est non ... mais peut-être que quelqu'un a un piratage intelligent?

Tout avis serait grandement apprécié.

htmlcsscss-selectors
144
Questioner

Vous pouvez utiliser le sélecteur d'attribut, input[name="goButton"] { }. Sachez qu'il n'est pas pris en charge dans IE6.

Mise à jour: En 2016, vous pouvez les utiliser à votre guise, IE6 étant mort http://quirksmode.org/css/selectors/

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

226
meder omuraliev

Exemple de saisie de texte

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

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

Vous pouvez utiliser des sélecteurs d'attributs mais ils ne fonctionneront pas dans IE6 comme l'a dit meder, il existe des solutions javascript à ce problème. Vérifier Selectivizr

Plus en détail dans les sélecteurs d'attributs: 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

Pour les futurs googlers, FYI, la méthode dans la réponse de @meder, peut être utilisée avec tout élément ayant un attribut name, disons donc un <iframe> avec le nom xyz puis vous pouvez utiliser la règle comme suit.

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

L'attribut name peut être utilisé sur les éléments suivants:

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

Si je comprends bien votre question alors,

Oui, vous pouvez définir le style d'un élément individuel si son identifiant ou son nom est disponible,

par exemple. 

si id disponible, vous pouvez contrôler l’élément comme, 

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

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

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

sinon si le nom est disponible, alors vous pouvez avoir le contrôle de l'élément comme, 

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

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

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

Utiliser [name=elementName]{} sans balise avant fonctionnera aussi . Tous les éléments portant ce nom seront affectés.

Par exemple:

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

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

C'est le travail idéal pour le sélecteur de requête ...

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

Vous pouvez ensuite parcourir ces collections pour utiliser les éléments trouvés.

0
user4723924