Czy mogę zastosować styl CSS do nazwy elementu?

176

Obecnie pracuję nad projektem, w którym nie mam kontroli nad kodem HTML, do którego stosuję style CSS. A kod HTML nie jest dobrze oznaczony, w tym sensie, że nie ma wystarczającej liczby deklaracji identyfikatorów i klas, aby rozróżniać elementy.

Dlatego szukam sposobów na zastosowanie stylów do obiektów, które nie mają atrybutu id ani class.

Czasami elementy formularza mają atrybut „nazwa” lub „wartość”:

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

Czy istnieje sposób, w jaki mogę zastosować styl oparty na name = "goButton"? A co z „wartością”?

Trudno jest się tego dowiedzieć, ponieważ wyszukiwarka Google znajduje różne rodzaje przypadków, w których na stronach internetowych pojawiają się ogólne terminy, takie jak „nazwa” i „wartość”.

Podejrzewam, że odpowiedź brzmi nie ... ale może ktoś sprytnie włamał się?

Każda rada byłaby bardzo mile widziana.

Indagator
źródło

Odpowiedzi:

52

Przykład wprowadzania tekstu

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

input[name=myname] {
  width: 100px;
}
<input type="text">
<br>
<input type="text" name="myname">

MRRaja
źródło
21

Możesz używać selektorów atrybutów, ale nie będą one działać w IE6, tak jak powiedział meder, istnieją obejścia javascript. Sprawdź Selectivizr

Bardziej szczegółowe informacje na temat selektorów atrybutów: 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 }
ChrisR
źródło
13

W przypadku przyszłych pracowników Google FYI, metoda zawarta w odpowiedzi @meder, może być używana z dowolnym elementem, który ma atrybut name, więc powiedzmy, że istnieje <iframe>z nazwą, xyza następnie możesz użyć reguły jako poniżej.

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

nameAtrybut może być stosowany na następujących elementach:

  • <button>
  • <fieldset>
  • <form>
  • <iframe>
  • <input>
  • <keygen>
  • <map>
  • <meta>
  • <object>
  • <output>
  • <param>
  • <select>
  • <textarea>
Mohd Abdul Mujib
źródło
1
to naprawdę niczego nie dodaje do pytania. nameAtrybut można umieścić na cokolwiek, jeśli naprawdę chce
Isaac
4

Jeśli dobrze zrozumiem twoje pytanie,

Tak, możesz ustawić styl pojedynczego elementu, jeśli jego identyfikator lub nazwa są dostępne,

na przykład

jeśli identyfikator jest dostępny, możesz uzyskać kontrolę nad elementem, takim jak,

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

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

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

w przeciwnym razie, jeśli nazwa jest dostępna, możesz uzyskać kontrolę nad elementem, takim jak,

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

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

v_obj.setAttribute('style','color:red;background:none');
Jitesh
źródło
4

Używanie wcześniej [name=elementName]{}bez tagu też będzie działać. Wpłynie to na wszystkie elementy o tej nazwie.

Na przykład:

[name=test] {
  width: 100px;
}
<input type=text name=test>
<div name=test></div>

Richard Socker
źródło
0

To idealna praca dla selektora zapytań ...

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

Następnie możesz przejrzeć te kolekcje w pętli, aby operować na znalezionych elementach.

user4723924
źródło
0

jeśli w przypadku, gdy nie używasz nazwy w danych wejściowych, ale innego elementu, możesz wskazać inny element z atrybutem tam.

    [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">

mam nadzieję, że pomoże. Dziękuję Ci

Ali Raza
źródło
0

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

input[name=myname] {
  width: 100px;
length: 150px;
}
<input type="text">
<br>
<input type="text" name="myname">

auni athirah
źródło
1
Spróbuj dodać opis tego, co robi ten kod. Może to znacznie poprawić jakość Twojej odpowiedzi.
Christopher Moore
-2

czy zbadałeś możliwość korzystania z jQuery? Ma bardzo model selektora zasięgu (podobny w składni do CSS) i nawet jeśli twoje elementy nie mają identyfikatorów, powinieneś być w stanie je wybrać za pomocą relacji rodzic -> dziecko -> wnuk. Po ich wybraniu jest bardzo proste wywołanie metody (nie pamiętam dokładnej nazwy), która pozwala na zastosowanie stylu CSS do elementu (elementów).

Powinien być prosty w użyciu, a jako bonus najprawdopodobniej będziesz bardzo kompatybilny z różnymi platformami.

DXM
źródło