'JavaScript' 카테고리의 다른 글
| 폼태그 및 접근법 (0) | 2019.03.04 |
|---|---|
| 이벤트 처리 (0) | 2019.03.04 |
| this와 var의 차이점 (0) | 2019.03.04 |
| 함수 선언방법 (0) | 2019.03.04 |
| 자바스크립트 함수 기초 (0) | 2019.03.04 |
JavaScript
태그 속성 접근
# 태그의 속성 접근
<script>
function 함수명(){
a=태그주소.속성1 // 단 속성은 사용자가직접만든속성은 다른방법으로 접근가능함
}
</script>
<태그명 속성1=값1 속성2=값2> </태그명>
[ex] 글자를 클릭하면 글자색을 'green'으로 바꾸시오.
<html>
<head>
<style type="text/css">
</style>
<script>
function m(fontObj){
fontObj.color = "green"; // 커스텀속성이 아니면 그냥 접근가능
}
</script>
</head>
<body>
<font color="yellow" onclick="m(this)">aaa</font>
</body>
</html>
[ex] 해당 태그의 style속성에 접근가능!
<head>
<style type="text/css">
div {
background-color: yellow;
}
</style>
<script>
function m(divObj) {
divObj.style.backgroundColor = "green"; // 세팅
alert( divObj.style.backgroundColor); // 호출
}
</script>
</head>
<body>
<div onclick="m(this)">aaa</div>
</body>
[ex] 커스텀속성에 접근
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<style type="text/css">
font {
background-color: black;
}
</style>
<script>
function m(divObj) {
// font태그의 커스텀태그인 aaa에 접근
alert( divObj.aaa); // undefined
alert( divObj.getAttribute("aaa")); // 123
alert( $(divObj).attr("aaa") ); // 123 ( jQuery )
}
</script>
</head>
<body>
<font color="yellow" aaa="123" onclick="m(this)">aaa</font>
</body>