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

Je suis actuellement en train de travailler sur un projet où je n'ai pas de contrôle sur le code HTML que je suis à l'application de feuilles de style CSS. Et le HTML n'est pas très bien étiqueté, dans le sens où il n'y a pas assez d'id et les déclarations de classe pour différencier entre les éléments.

Donc, je suis à la recherche de façons d'appliquer des styles à des objets qui n'ont pas un id ou une classe d'attribut.

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

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

Est-il un moyen que je peux appliquer un style basé sur name="goButton"? Que dire de "valeur"?

C'est le genre de chose qui est difficile à trouver, car une recherche sur Google va trouver toutes sortes de situations dans lesquelles large des termes tels que "nom" et "valeur" apparaîtra dans les pages web.

Je suis une sorte de soupçonner la réponse est non... mais peut-être quelqu'un a un piratage intelligent?

Tout conseil serait grandement apprécié.

InformationsquelleAutor Questioner | 2011-03-29
  1. 240

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

    Mise à jour: En 2016, vous pouvez très bien les utiliser comme vous le souhaitez, depuis IE6 est mort. http://quirksmode.org/css/selectors/

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

    InformationsquelleAutor meder omuraliev
  2. 51

    De Saisie De Texte Exemple

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

input[name=myname] {    
    width: 100px;
}
    InformationsquelleAutor MRRaja
  3. 20

    Vous pouvez utiliser le sélecteur d'attribut, mais ils ne fonctionnent pas dans IE6 comme meder dit, il y a du javascript solutions de contournement pour que tho. Vérifier Selectivizr

    Plus détaillée dans le sélecteur d'attribut: 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 }
    InformationsquelleAutor ChrisR
  4. 11

    Pour l'avenir googlers, pour info, la méthode de la réponse par @meder , peut être utilisé avec n'importe quel élément a un attribut de nom, donc permet de dire que theres un <iframe> avec le nom xyz ensuite, vous pouvez utiliser la règle comme belows.

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

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

    • <button>
    • <fieldset>
    • <form>
    • <iframe>
    • <input>
    • <keygen>
    • <map>
    • <meta>
    • <object>
    • <output>
    • <param>
    • <select>
    • <textarea>
    • ce n'est pas vraiment ajouter quelque chose à la question. Le name attribut peut être mis sur n'importe quoi, si tu le voulais vraiment
    • Idéal pour le style de la balise meta!
    InformationsquelleAutor Mohd Abdul Mujib
  5. 4

    Si je comprends votre question et à droite, puis,

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

    par exemple

    si l'id disponible, alors u peut obtenir le contrôle sur 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');

    d'autre si le nom est disponible, alors u peut obtenir le contrôle sur 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');
    InformationsquelleAutor Jitesh
  6. 3

    À l'aide de [name=elementName]{} sans étiquette avant sera trop de travail.
    Il aura une incidence sur tous les éléments de ce nom.

    Par exemple:

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

[name=test]{
 width: 100px;
}
    InformationsquelleAutor Richard Socker
  7. 0

    C'est le job parfait pour la requête sélecteur...

    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 faire une boucle par ces collections d'opérer sur les éléments présents.

    InformationsquelleAutor user4723924
  8. -2

    avez-vous exploré la possibilité d'utiliser jQuery? Il a une très portée sélecteur de modèle (similaire à la syntaxe du CSS) et même si vos éléments n'ont pas d'Identifiants, vous devriez être en mesure de les sélectionner à l'aide de parent --> enfant --> petit-enfant de la relation. Une fois que vous avez sélectionné, il y a une méthode très simple appel (j'ai oublié le nom exact) qui vous permet d'appliquer un style à l'élément(s).

    Il devrait être simple à utiliser et en bonus, vous aurez plus de chances être très compatible multi-plateforme.

    InformationsquelleAutor DXM