<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src ="http://code.jquery.com/jquery-latest.js"></script>
<title>.attr()</title>
<style>
em
{
color: blue;
font-weight;
bold;
}
div
{
color: red;
}
</style>
</head>
<body>
<p>Somthing like... <em title="huge, gigantic">huge and gigantic</em> dinosaur! </p>
Information of "em" tag...
<div></div>
<script>
//"em"엘리먼트의 "title" 속성값을 가져옴
var title= $("em").attr("title");
$("div").text("title attr : " + title);
</script>
<br/><br/>
<button>Enable</button>
<input type="text" title="hello"/>
<div id= "log" style="colot: black;"></div>
<script>
(function()
{
//"input"엘리먼트의 "title"속성값을 가져옴
var inputTitle =$("input").attr("title");
$("button").click(function()
{
//this는 현재 누른 버튼을 의미. 따라서 this의 next는 "input"엘리먼트를 의미함.
//콘솔 로그 참조
var input = $(this).next();
console.log(this);
console.log(input);
//원래의 속성값과 클릭할때 가져온 속성값이 같으면 속성을 삭제
if(input.attr("title") == inputTitle)
{
input.removeAttr("title");
}
//원래의 속성값과 클릭할때 가져온 속성값이 다르면 원래의 속성값을 적용
else
{
input.attr("title", inputTitle);
}
//html()을 통해 "log"라는 id를 가진 엘리먼트의 innerHTML값을 수정.
//cf. ~.html();을 통해 엘리먼트의 innerHTML값을 가져올 수 있음.
$("#log").html("<input> 엘리먼트 title의 속성값 : " + input.attr("title"));
});
}) ();
</script>
</body>
</html>
14-2_Attr_attr()_html().html'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 14-2_Attr_removeClass().html (0) | 2016.12.12 |
|---|---|
| [JavaScript] 14-2_Attr_hasCalss().html (0) | 2016.12.12 |
| [Javascript] 14-2_Attr_addClass().html (0) | 2016.12.12 |
| [Javascript] 12-3_XMLHttpRequestStatus.js (0) | 2016.12.09 |
| [JavaScript] 12-2_getResult.jsp (0) | 2016.12.09 |