CSS 스타일_경험 교환을 사용하여 입력이 버튼인지 텍스트 상자인지 구별하는 방법
- PHP中文网원래의
- 2016-05-16 12:04:551851검색
스타일 설정 시 입력이 버튼인지 텍스트 상자인지 구별하는 방법에 대한 기술적 조사 - 입력에서 콘텐츠를 꺼냅니다.
html 태그 를 보면 무엇을 알 수 있을까요? 생각나나요? 텍스트 상자? 버튼? 라디오 버튼? 체크박스? ...네, 네, 네, 괜찮습니다. 아마도 이 작은 입력으로 실제로 10가지의 다른 항목이 생성될 수 있다고 생각하지 못했을 수도 있습니다. 다음은 생각하지 못한 항목을 확인할 수 있는 목록입니다.
비밀번호 상자
제출 버튼
재설정 버튼
< input type="radio" /> 라디오 버튼
체크박스
일반 버튼
<입력 유형 ="file" /> 파일 선택 제어
숨겨진 상자
이미지 버튼
그렇다고 할 수 있습니다. 입력은 정말 대단한 일이고 매우 "도발적"입니다. 그러나 실제로 프로젝트의 다양한 컨트롤에 대해 서로 다른 스타일을 설정하려고 하면 입력이 실제로 "어지러워질" 수 있다는 것을 알게 될 것입니다. 애초에 입력에 왜 그렇게 많은 ID가 부여되었는지는 모르겠지만 "N-fold ID"는 웹 사이트 디자이너에게 많은 문제를 가져왔습니다. 다행히 일하는 사람들은 훌륭하고 문제를 해결할 방법은 아직 남아 있습니다 ~ 비록 모두 치명적인 단점이 있지만 Orz ... 해방 방법을 대략적으로 요약하면 목록은 다음과 같습니다 (저는 그다지 재능이 없습니다 이므로 실수나 누락이 불가피하므로 전문가 여러분께 묻고 싶습니다. 지침):
1. CSS 표현식을 사용하여 표현식을 결정합니다
2. CSS에서 유형 선택기를 사용합니다
3. .자바스크립트 스크립트를 사용하여 구현
4. Microsoft Visual Studio를 사용하는 경우 2005년 이후 버전의 개발 프로젝트에서는 스킨도 사용할 수 있습니다.
다음에서는 각 방법의 세부 구현과 장단점을 설명합니다.
1: CSS 표현식을 사용하여 표현식 판단 구현 코드 참조:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<머리>
<제목> diffInput2 제목>
<meta 이름="저자" 내용="저스틴영"/>
<메타 이름="키워드" 콘텐츠="" />
<메타 이름="설명" 콘텐츠=""/>
<메타 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<스타일 유형="text/css" >
입력
{
배경색: 표현식(this.type=="text"?'#FFC':'');
}
스타일>
머리 >
<몸>
<dl>
<dt>이것은 일반 텍스트 상자입니다:<dd><입력유형="text"이름="">
<dt> <dd><입력 유형="버튼"값 ="저는 버튼입니다">
dl>
몸>
html>
단점: FireFox에서는 판단식 표현을 지원하지 않습니다. 치명적인 점은 하나만 구별할 수 있다는 점입니다(예를 들어 예시에서는 텍스트 텍스트 상자만 구별할 수 있습니다). 여러 개 설정하려고 하지 마세요. 다음은 위의 Orz를 덮어쓰게 됩니다...
2: CSS에서 유형 선택기 사용
구현 참조 코드:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<머리>
<제목> diffInput2 제목>
<meta 이름="저자" 내용="저스틴영"/>
<메타 이름="키워드" 콘텐츠="" />
<메타 이름="설명" 콘텐츠=""/>
<메타 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<스타일유형="text /css">
input[type="text"]
{
배경색 :#FFC;
}
input[type="password"]
{
배경 이미지:url(BG.gif);
}
입력[type="submit"]
{
배경색:파란색;
색상 :흰색;
}
입력 [type="reset"]
{
배경색:네이비;
색상:흰색;
}
input[type="radio"]
{
/* FF에서는 배경색과 같은 일부 라디오 스타일이 지원되지 않습니다*/
여백:10px;
}
input[type="checkbox"]
{
/*FF에서는 background-color와 같은 일부 체크박스 스타일이 지원되지 않습니다*/
여백:10px;
}
input[type="button"]
{
배경색:연청색;
}
스타일> ;
머리>
< 몸>
<dl>
<dt>이것은 일반적인 텍스트 상자입니다:<dd><입력 유형="text" 이름="">
<dt>이것은 비밀번호 텍스트 상자입니다. <dd><입력 입력="비밀번호" 이름="">
<dt >제출 버튼은 다음과 같습니다.<dd><입력 입력="제출">
<dt >재설정 버튼입니다:<dd><입력유형="재설정">
<dt >이것은 라디오입니다:<dd><입력 유형="라디오" 이름="ground1"> <입력 유형="radio" 이름="ground1" >
<dt>체크박스는 다음과 같습니다. <dd><입력 유형="checkbox" 이름 ="ground2"> <입력입력="checkbox" 이름="ground2">
<dt>이 버튼은 일반 버튼입니다:<dd><입력유형="버튼"값="i' m버튼">
dl>
본체>
html>
장점: 간단하고 명확하며 다양한 입력 제어 형태로 나눌 수 있습니다.
단점: 유형 선택기, 웹 표준을 잘 지원하지 않는 IE6 이전 브라우저는 지원할 수 없습니다(치명적 Orz...)
3: 자바스크립트 스크립트를 사용하여 구현
구현 참조 코드:
프론트엔드 HTML 코드:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> diffInput title>
<meta name="Author" content="JustinYoung">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style type="text/css">
input{behavior:url('css.htc');}
style>
머리>
< 몸>
<dl>
<dt>이것은 일반적인 텍스트 상자입니다:<dd><입력 유형="text" 이름="">
<dt>이것은 비밀번호 텍스트 상자입니다. <dd><입력 입력="비밀번호" 이름="">
<dt >제출 버튼은 다음과 같습니다.<dd><입력 입력="제출">
<dt >재설정 버튼입니다:<dd><입력유형="재설정">
<dt >이것은 라디오입니다:<dd><입력 유형="라디오" 이름="ground1"> <입력 유형="radio" 이름="ground1" >
<dt>체크박스는 다음과 같습니다. <dd><입력 유형="checkbox" 이름 ="ground2"> <입력입력="checkbox" 이름="ground2">
<dt>일반적인 버튼입니다:<dd><입력 유형="버튼" 값="i' m 버튼">
dl>
본체>
html>
Css.htc代码:
<Skript Sprache=Javascript>
Schalter(Typ)
{
case 'text':
style.backgroundColor= "rot";
Pause;
case 'password':
style.backgroundImage="url(BG.gif) ";
Pause;
Fall 'submit':
style.backgroundColor="blau";
Stil. Farbe="weiß";
Pause;
case 'reset':
style.backgroundColor="Marineblau";
style.color="weiß ";
Pause;
Fall 'Radio':
style.backgroundColor="hotpink";
break;
case 'checkbox':
style.BackgroundColor= "녹색";
휴식;
케이스 '버튼':
style.BackgroundColor="lightblue";
휴식;
기본값:; //다른 사람들은 기본 스타일을 사용합니다.
}
script>
장점: 각 입력 제어 양식을 분할할 수 있습니다. 여러 기술의 혼합 사용은 "나는 주인이다"라는 허영심을 충족시킵니다.
단점: 후처리에 js를 사용하기 때문에 이 기술에는 많은 교육이 필요하므로 js가 적용되기 전에 각 입력은 여전히 원래 상태에 있다가 갑자기 "멋지게 변합니다". 페이지가 매우 이상해요. 더 치명적인 것은 FireFox가 Orz를 지원하지 않는다는 점입니다...
4: Microsoft Visual Studio 2005에서 스킨을 사용합니다.
스킨 파일 참조 코드:
<%--스타일 일반 TextBox--%>
<asp:TextBox runat="서버" 스타일 ="배경색:#FFC ">asp:TextBox >
<asp:Button runat="서버" 스타일=" 배경-색상: 빨간색">asp:Button>
Beachten Sie, dass die darin enthaltenen Stile mit style anstelle von cssClass hinzugefügt werden. Der Grund ist sehr einfach. Wenn Sie cssClass verwenden, überschreibt die vorherige cssClass diese. zum Scheitern führen. Natürlich kann Skin nicht alleine verwendet werden und muss in Verbindung mit CSS-Stylesheets verwendet werden.
Vorteile: Sie können jedes Steuerelementformular partitionieren (Hinweis: Skin kann nur für serverseitige Steuerelemente verwendet werden, es handelt sich also nicht mehr um ein einfaches Eingabe-Tag, obwohl diese serverseitigen Steuerelemente immer noch vorhanden sind, wenn sie „getroffen“ werden) an der Rezeption) Eingabekontrolle). Zusätzlich zum CSS ist es durch eine weitere Ebene getrennt, wodurch die Stileinstellungen besser anpassbar sind. Weitere Vorteile (siehe Vorteile der Haut).
Nachteile: Kann nur mit serverseitigen Steuerungen verwendet werden. Nicht alle Projekte können die Skin-Funktion Orz nutzen...
Zusammenfassung: Die oben genannten Methoden haben daher alle ihre eigenen Vor- und Nachteile , kann die Verwendung einer der beiden allein das Problem nicht gut lösen. Daher sollten mehrere Methoden gemeinsam eingesetzt werden, um das Problem besser zu lösen. Aber sind mehrere Methoden perfekt, wenn sie zusammen verwendet werden? NEIN~! Es hat auch einen fatalen Nachteil: Die Wartung mehrerer Lösungen erfordert höhere Kosten!
Postscript: Dies ist eine unruhige Ära, angeführt von IE6, als Nicht-Web-Standardbrowser die Welt eroberten. Ich weiß nicht, wie viele Webseiten-Anfänger Wie viele Programmierer sind in IE6 auf tragische Weise gestorben, und unzählige Webdesigner leben in Demütigung unter IE6. Obwohl noch im Dunkeln, freuen wir uns über das Auftauchen der mutigen Leute von FireFox, die sich der Tyrannei widersetzen, und über den Beginn der zunehmend besseren Unterstützung von Webstandards durch IE7. Aber die Nacht wird noch lange dauern. Wir sind sowohl glücklich als auch traurig über die Ära, in der Webstandards die Welt dominieren. Die gute Nachricht ist, dass unser Webdesign und unsere Planung bis dahin so einfach sein werden wie das Essen. Das Traurige ist: Wenn es wirklich so weit ist, werden unsere Reisschüsseln dann immer noch so schwer sein? Für den Fortschritt der menschlichen Gesellschaft, die Technologie zur Rettung der Erde und die technologische Kultur zur Entwicklung des Universums -_-b... freue ich mich jedoch immer noch auf die Ankunft von Webstandards, die die Welt dominieren werden.
Schlüsselwort: Automatische Unterscheidung zwischen