JavaScript에서 HTML 양식 요소의 스타일 설정
런타임에 사용자 지정 스타일을 HTML 요소로 설정하는 사용 사례 중 하나는 양식에서 유효성 검사를 수행하는 동안입니다. 요소를 빨간색으로 강조 표시하고Username field cannot be left empty와 같은 유효성 검사 텍스트를 표시해야합니다. JavaScript를 사용하여 런타임에 HTML 요소에 스타일 매개 변수를 설정하는 다양한 방법이 있습니다. 새로운 스타일을 추가하고 기존 스타일도 변경할 수 있습니다. 다음은 JavaScript를 사용하여 CSS 스타일을 HTML 요소로 설정할 수있는 몇 가지 방법입니다.
JavaScript의 HTML 요소에 스타일 추가
JavaScript.style속성을 사용하여 요소의 스타일을 변경할 수 있습니다. 그 전에 HTML 요소를 쿼리하고.style속성을 설정해야합니다. JavaScript에서 HTML 요소를 쿼리하는 방법은 다음과 같이 다양하지만 가장 일반적으로 사용되는 방법은document.getElementById()메소드입니다.
getElementById(): JavaScript에서 문서 인터페이스의 ID를 기반으로 HTML 요소를 쿼리하는 데 사용됩니다. 일반적으로 웹 페이지를 디자인하는 동안 개발자는 HTML 요소에 고유 한 ID를 할당합니다.getElementById()는getElementById()함수의 매개 변수에 지정된 ID를 가진 요소를 리턴합니다. 동일한 ID를 가진 요소가 더 많은 경우 지정된 ID를 가진 첫 번째 요소가 반환됩니다.getElementsByClassName(): HTML 요소를 쿼리하는 또 다른 방법은 할당 된 클래스 이름을 사용하는 것입니다. 이들은 일반적으로 요소 장식에 사용되는 CSS 클래스 이름입니다. 둘 이상의 HTML 요소가 동일한 CSS 클래스 이름을 가질 수 있으므로 함수는 HTML 요소의 배열을 반환합니다.getElementsByClassName()함수에 의해 반환 된 모든 요소 또는 요소에 특정 스타일을 변경하거나 추가하도록 선택할 수 있습니다.getElementsByName(): CSS 클래스 이름으로 HTML 요소를 선택하는 방식과 유사하게getElementsByName()함수는 name 속성을 사용하여 예상되는 HTML 요소를 필터링합니다. 이 경우 이름이 같은 HTML 요소가 두 개 이상있을 수 있습니다. 따라서 매개 변수에 전달 된 것과 동일한name속성을 갖는 HTML 요소의 배열을 리턴합니다.getElementsByTagName():<div>,<p>,<li>태그 등과 같은 특정 HTML 태그를 선택해야하는 경우에 사용됩니다. 스타일을 적용하거나 설정하는 것이 편리합니다. 한 번에 모든<div>요소에 스타일을 적용 할 수 있습니다.getElementsByTagName()함수는 매개 변수에서 함수에 전달 된 태그 이름이있는 요소의 배열을 리턴합니다. 한 번에 스타일을 변경해야하는 HTML 태그가 둘 이상있을 수 있습니다.querySelector(): 요소를 검색하는 마스터 메소드와 같습니다. 이 JavaScript 함수에서 허용하는 매개 변수의 사용법을 이해하려면 CSS에서 HTML 요소를 쿼리하기 위해 선택기를 사용하는 것을 고려하십시오.document.querySelector("div span")(div 내의 모든 범위 선택),document.querySelector("#elementID")와 같은 태그 이름의 조합을 사용하여 ID를 기반으로 요소를 쿼리 할 수 있습니다. ),document.querySelector(".sample-css")(CSS 클래스 이름이sample-css인 요소를 쿼리) 등. 함수에 매개 변수로 전달 된 기준을 충족하는 첫 번째 요소를 반환합니다.querySelectorAll: 반환 유형을 제외한 모든 측면에서querySelector()와 유사합니다.querySelector()함수에서와 같이 기준을 충족하는 첫 번째 요소 만 반환하는 대신querySelectorAll함수는 매개 변수에 언급 된 조건을 충족하는 모든 HTML 요소를 메서드에 반환합니다. HTML 요소가 선택되면.style속성과 변경 또는 추가하려는 스타일 이름을 차례로 사용합니다. 예를 들어, 다음 코드에서 ID가username인 요소의 배경색상을 변경하려고합니다.
<div id="username">
<label>User Name: </label>
<input type="text" id="username" name="UserName">
</div>
window.onload = function() {
document.getElementById('username').style.backgroundColor = 'green';
}
선택한 HTML 요소에 이미 설정된 스타일 속성 (예 : 배경색)이있는 경우 다음 코드가이를 변경합니다. 스타일 속성이없는 경우 런타임에 JavaScript 코드에 의해 새 스타일이 추가됩니다.
JavaScript에서 클래스 이름을 사용하여 요소에 스타일 적용
JavaScript 함수getElementsByClassName()과 함께 클래스 이름을 사용하여 요소를 쿼리 할 수 있습니다. 요소가 선택되면.style속성을 사용하여 요소의 스타일을 추가하거나 변경할 수 있습니다. 이 메소드는 요소의 특정 CSS 클래스에 추가 CSS 속성이 필요할 때 적용됩니다. 다음 코드는 사용법을 보여줍니다.
<div id="username" class="blue-bg">
<label>User Name: </label>
<input type="text" id="username" name="UserName">
</div>
window.onload = function() {
document.getElementsByClassName('blue-bg')[0].style.backgroundColor = 'green';
}
참고 : 여기서getElementsByClassName("blue-bg")함수는 요소 배열을 반환합니다. 따라서 스타일을 적용하려는 요소의 인덱스를 선택해야합니다. 스타일 속성이 CSS 클래스 또는 인라인 스타일에 의해 이미 설정된 경우.style속성이이를 덮어 씁니다. 아직 설정하지 않은 경우 대상 HTML 요소의 스타일을 설정하는 새 속성을 추가합니다.
JavaScript에서 태그에 스타일 적용
모든div또는 모든span에 스타일을 추가해야하는 경우.getElementsByTagName()함수를 사용할 수 있습니다. DOM에서 태그 이름을 쿼리합니다. 매개 변수로 전달 된 태그 이름을 만족하는 HTML 요소 모음을 반환합니다. 함수가 HTML 요소를 반환하면 색인을 사용하여 해당 요소에 스타일 속성을 적용 할 수 있습니다. 다음 코드에서 자세히 설명합니다.
<div id="output">Hello World!!</div>
<form name="LoginForm">
<div id="username" class="blue-bg">
<label>User Name: </label>
<input type="text" id="username" name="UserName">
</div>
<div>
<label>Password: </label>
<input type="password" name="password">
</div>
<div>
<label>Description: </label>
<textarea name="description"></textarea>
</div>
<div>
<label>Occupation: </label>
<select id="occupationSelect" autofocus>
<option>Student</option>
<option>Teacher</option>
<option>Engineer</option>
</select>
</div>
</form>
window.onload = function() {
document.getElementsByTagName('div')[0].style.backgroundColor = 'green';
}
위 코드를 실행하면 첫 번째div(<div id="output">Hello World!!</div>)의 배경색이 녹색으로 설정됩니다. 첫 번째div를 타겟팅하므로 색인을0(document.getElementsByTagName("div")[0])으로 사용합니다. 마찬가지로document.getElementsByTagName("body")[0].style.backgroundColor = "green"을 사용하여 body 태그에도 스타일 속성을 할당 할 수 있습니다. HTML 문서에는 body 태그가 하나만 허용되므로 body 요소를 직접 쿼리하고document인터페이스의.body속성을 사용하여 스타일 속성을 적용 할 수 있습니다. 따라서 코드는document.body.style.backgroundColor = "green"처럼 보입니다.