요소 이름에 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
'programing' 카테고리의 다른 글
Android에서 화면 캡처를 방지하는 방법 (0) | 2023.11.04 |
---|---|
MariaDB 10.4.10 ERROR 1146 (42S02):'mysql.user' 테이블이 없습니다. (0) | 2023.11.04 |
C switch 문보다 크고 작음 (0) | 2023.11.04 |
Angularjs [$rootScope:inprog] 진행 중 오류 발생 (0) | 2023.11.04 |
memcmp가 루프 체크보다 훨씬 빠른 이유는 무엇입니까? (0) | 2023.11.04 |