728x90
반응형
속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 이 속성을 제어하는 API를 알아본다.
텍스트를 누르면 네이버홈페이지가 나오고 버튼을 클릭한뒤 다시 텍스트를 누르면 다음홈페이지가 나오게 해본다.
<body>
<li><a id="naver" target="_blank" href="https://www.naver.com/">NAVER</a></li>
<button onclick="changeHref();">change</button>
<script>
function changeHref() {
var oNaverTag = document.querySelector("#naver"); //li태그 가져옴
var sHref = oNaverTag.getAttribute("href"); //getAttribute: li이름뿐아니라 속성도 가져올수있게
alert(sHref); //지정한 naver url
oNaverTag.setAttribute("href", "https://www.daum.net/"); //attribute이름, 변경된값
oNaverTag.setAttribute("title", "daum으로 이동합니다.");
oNaverTag.setAttribute("id", "daum");
}
</script>
</body>버튼을 클릭한뒤 브라우저에서 f12의 elements를 보면 id이름과 주소가 daum홈페이지의 값, 변경된값으로 바뀌어있는걸 확인할 수 있다.
getAttribute(key) : 값 가져옴,return값 존재
setAttribute(key,value) : 값 내보냄, 값 세팅, return값 존재x
이미지를 클릭하면 커지고, change 버튼을 누르면 이미지가 변경되게 해본다.
<body>
<a onclick="sizechangeImg();" title "누르면 커집니다.">
<img id="img" src="./../HTML/picture/cutttty.jpeg" style="width:200px" />
</a>
<button onclick="changeImg();">changeImg</button>
<script>
var oImgTag = document.querySelector("#img");
// 이미지 크기 변경
function sizechangeImg(){
var sStyle = oImgTag.getAttribute("style");
if( sStyle === "width:200px" ){
oImgTag.setAttribute("style","width:300px");
} else {
oImgTag.setAttribute("style","width:200px")
}
}
// 이미지 변경
function changeImg() {
// var oImgTag = document.getElementsByTagName("img"); //배열로가져와서
// var sSrc = oImg[0].getAttribute("src"); //인덱스로 접근
// oImg[0].setAttribute("src", "./../HTML/picture/cuttty.jpeg");
var sSrc = oImgTag.getAttribute("src");
if ( sSrc === "./../HTML/picture/cutttty.jpeg") {
oImgTag.setAttribute("src", "./../HTML/picture/cuttty.jpeg");
}
}
</script>
</body>
728x90
반응형
'Fiori > UI5' 카테고리의 다른 글
| [JavaScript] JSON (0) | 2023.03.07 |
|---|---|
| [JavaScript] 이벤트 (0) | 2023.03.07 |
| [JavaScript] Element 식별자 (0) | 2023.03.06 |
| [JavaScript] 문서 객체 모델(DOM) 접근 (0) | 2023.03.06 |
| [JavaScript] Date (0) | 2023.03.06 |
댓글