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

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

저는 현재 CSS 스타일을 적용하고 있는 HTML을 제어할 수 없는 프로젝트를 진행하고 있습니다.그리고 HTML은 요소들을 구분하기에 충분한 id와 클래스 선언이 없다는 점에서 라벨이 잘 붙어 있지 않습니다.

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

폼 항목에 "이름" 또는 "값" 속성이 있는 경우가 있습니다.

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

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

구글 검색을 통해 "이름"이나 "가치"와 같은 광범위한 용어가 웹 페이지에 나타나는 모든 종류의 사례를 찾을 수 있기 때문에 이는 찾아보기 어렵습니다.

제 생각엔 '아니오'라는 대답이...영리한 해킹을 한 사람이 아닐까요?

어떤 조언이라도 해주시면 대단히 감사하겠습니다.

속성 선택기를 사용할 수 있고,

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

속성 선택기를 사용할 수 있지만 meder가 말한 대로 IE6에서는 작동하지 않습니다. 그래도 자바스크립트를 사용할 수 있는 방법이 있습니다.선택비저 확인

속성 선택기에 대한 자세한 내용: 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 }

미래의 구글러들을 위해, @meder에 의한 답변의 메소드인 FYI는 이름 속성을 가진 어떤 요소와도 사용될 수 있으므로, 다음과 같이 가정해 보겠습니다.<iframe>라는 이름으로xyz그러면 아래와 같이 규칙을 사용할 수 있습니다.

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

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

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

사용.[name=elementName]{}태그가 없는 것도 효과가 있을 것입니다.이 이름을 가진 모든 요소에 영향을 미칩니다.

예를 들어,

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

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

당신의 질문을 제대로 이해했다면,

예, 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');

입력에서 이름을 사용하지 않고 다른 요소를 사용하는 경우, 다른 요소를 속성으로 대상화할 수 있습니다.

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

도움이 되기를 바랍니다.감사해요.

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

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

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

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

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

그런 다음 이러한 컬렉션을 순환시켜 찾은 요소에 대해 작동할 수 있습니다.

당신은 jQuery의 사용가능성을 탐색해보셨습니까?매우 리치 셀렉터 모델(CSS와 구문이 유사)을 가지고 있으며, 요소에 ID가 없더라도 부모 --> 자식 --> 손자 관계를 사용하여 요소를 선택할 수 있어야 합니다.선택하면 요소에 CSS 스타일을 적용할 수 있는 매우 간단한 메서드 호출(정확한 이름은 잊어버립니다)이 있습니다.

사용이 간단해야 하며, 이에 더해 여러 플랫폼이 호환될 가능성이 높습니다.

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