현재 CSS 스타일을 적용하는 HTML을 제어 할 수없는 프로젝트를 진행 중입니다. 그리고 HTML은 요소를 구별하기에 충분한 id 및 클래스 선언이 없다는 의미에서 레이블이 잘 지정되지 않았습니다.
그래서 id 또는 class 속성이없는 객체에 스타일을 적용 할 수있는 방법을 찾고 있습니다.
때로는 양식 항목에 "이름"또는 "값"속성이 있습니다.
<input type="submit" value="Go" name="goButton">name = "goButton"을 기반으로 스타일을 적용 할 수있는 방법이 있습니까? "가치"는 어떻습니까?
Google 검색에서 "이름"및 "값"과 같은 광범위한 용어가 웹 페이지에 나타나는 모든 종류의 인스턴스를 찾을 수 있기 때문에 찾기가 어렵습니다.
나는 대답이 '아니요'라고 의심하고 있습니다 ...하지만 누군가가 영리한 해킹을 가지고 있습니까?
모든 조언을 주시면 감사하겠습니다.
답변:
속성 선택기를 사용할 수 있습니다.
IE6에서는 지원되지 않습니다.
업데이트 : 2016 년 IE6가 죽었 기 때문에 원하는대로 사용할 수 있습니다. http://quirksmode.org/css/selectors/
속성 선택기를 사용할 수는 있지만 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');이것은 쿼리 선택기에 완벽한 작업입니다 ...
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그런 다음 이러한 콜렉션을 반복하여 발견 된 요소에서 작동 할 수 있습니다.
입력에서 이름이 아닌 다른 요소를 사용하는 경우 속성이있는 다른 요소를 대상으로 지정할 수 있습니다.
[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">
name만약 당신이 정말로 원한다면 이 속성은 무엇이든 넣을 수 있습니다