요소 이름에 CSS 스타일을 적용 할 수 있습니까?

요소 이름에 CSS 스타일을 적용 할 수 있습니까?

---

현재 CSS 스타일을 적용하는 HTML을 제어 할 수없는 프로젝트를 진행 중입니다. 그리고 HTML은 요소를 구별하기에 충분한 id 및 클래스 선언이 없다는 의미에서 레이블이 잘 지정되지 않았습니다.

그래서 id 또는 class 속성이없는 객체에 스타일을 적용 할 수있는 방법을 찾고 있습니다.

때로는 양식 항목에 "이름"또는 "값"속성이 있습니다.

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

name = "goButton"을 기반으로 스타일을 적용 할 수있는 방법이 있습니까? "가치"는 어떻습니까?

Google 검색에서 "이름"및 "값"과 같은 광범위한 용어가 웹 페이지에 나타나는 모든 종류의 인스턴스를 찾을 수 있기 때문에 찾기가 어렵습니다.

나는 대답이 '아니요'라고 의심하고 있습니다 ...하지만 누군가가 영리한 해킹을 가지고 있습니까?

모든 조언을 주시면 감사하겠습니다.

---

속성 선택기를 사용할 수 있습니다.

input[name="goButton"] {
  background: red;
}

<input name="goButton">

IE6에서는 지원되지 않습니다.

업데이트 : 2016 년 IE6가 죽었 기 때문에 원하는대로 사용할 수 있습니다. http://quirksmode.org/css/selectors/

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

---

텍스트 입력 예

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

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

<input type="text">
<br>
<input type="text" name="myname">

---

속성 선택기를 사용할 수는 있지만 IE6에서는 meder가 말한 것처럼 작동하지 않습니다. 그 자바 스크립트 해결 방법이 있습니다. 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 }

---

향후 Google 직원의 경우 @meder의 답변에있는 메소드 인 FYI는 name 속성이있는 모든 요소와 함께 사용할 수 있으므로 이름이있는 요소를 말하면 다음 <iframe>과 xyz같이 규칙을 사용할 수 있습니다.

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

이 name속성은 다음 요소에서 사용할 수 있습니다.

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

---

그때 당신의 질문을 이해한다면

예, ID 또는 이름을 사용할 수있는 경우 개별 요소의 스타일을 설정할 수 있습니다.

예 :

ID를 사용할 수 있다면 다음과 같이 요소를 제어 할 수 있습니다.

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

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

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

그렇지 않으면 이름을 사용할 수 있으면 다음과 같이 요소를 제어 할 수 있습니다.

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

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

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

---

[name=elementName]{}태그없이 사용 하면 작동합니다. 이 이름을 가진 모든 요소에 영향을 미칩니다.

예를 들면 다음과 같습니다.

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

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

---

이것은 쿼리 선택기에 완벽한 작업입니다 ...

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

그런 다음 이러한 콜렉션을 반복하여 발견 된 요소에서 작동 할 수 있습니다.

---

have you explored the possibility of using jQuery? It has a very reach selector model (similar in syntax to CSS) and even if your elements don't have IDs, you should be able to select them using parent --> child --> grandchild relationship. Once you have them selected, there's a very simple method call (I forget the exact name) that allows you to apply CSS style to the element(s).

It should be simple to use and as a bonus, you'll most likely be very cross-platform compatible.

참고URL : https://stackoverflow.com/questions/5468766/can-i-apply-a-css-style-to-an-element-name