web-dev-qa-db-ja.com

CSSスタイルを要素名に適用できますか？

私は現在CSSスタイルを適用しているHTMLを管理できないプロジェクトに取り組んでいます。そして、HTMLは、要素を区別するのに十分なidとクラスの宣言がないという意味で、あまりラベル付けされていません。

だから、私はidやclass属性を持たないオブジェクトにスタイルを適用できる方法を探しています。

時々、フォーム項目は "name"または "value"属性を持ちます。

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

Name = "goButton"に基づいてスタイルを適用する方法はありますか？ 「値」はどうですか？

Googleの検索では、「名前」や「値」などの広範な用語がWebページに表示されるあらゆる種類のインスタンスが検索されるため、これを見つけるのは困難です。

私は答えがノーだと疑うようなものです...しかし、おそらく誰かが巧妙なハックを持っている？

何かアドバイスは大歓迎です。

htmlcsscss-selectors
151
Questioner

属性セレクタinput[name="goButton"] { }を使うことができます。 IE6ではサポートされていないことに注意してください。

更新日：2016年には、IE6が機能しなくなったため、ほぼ必要に応じて使用できます。 http://quirksmode.org/css/selectors/

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

238
meder omuraliev

テキスト入力例

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

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

属性セレクタを使用することはできますが、mederが言ったようにIE6では機能しません。そのためのJavaScript回避策があります。チェック 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 }
20
ChrisR

将来のグーグルのために、FYI（@mederによる答えの中の方法）はname属性を持つどんな要素でも使うことができるので、xyzという名前の<iframe>があるとしましょう、そしてあなたは以下のように規則を使うことができます。

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

name属性は、以下の要素で使用できます。

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

そのとき私があなたの質問を理解すれば、

はい、そのIDまたは名前が利用可能であれば、個々の要素のスタイルを設定できます。

例えば.

idが利用可能ならば、uは以下のように要素を制御できます

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

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

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

そうでなければ、nameが利用可能ならば、uは以下のように要素を制御できます。

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

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

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

タグなしで[name=elementName]{}を使用することもまたうまくいきます。この名前を持つすべての要素に影響します。

例えば：

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

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

これはクエリーセレクターにとって完璧な仕事です...

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

その後、見つかった要素を操作するためにこれらのコレクションをループすることができます。

0
user4723924