window.onload = function() {
var menu2 = document.getElementById("menu2");
var liArrays = menu2.getElementsByTagName("li");
for(var i=0; i<liArrays.length; i++){
var li = liArrays[i];
li.style.color = "blue";
}
}
jQuery
$(document).ready(function(){
$("#menu2 li").css("color", "#f00");
})
<div>안녕하세요.초보입니다.</div>
<button id="hideText">글자 숨기기</button>
<button id="showText">글자 보이기</button>
script
$(document).ready(function(){
//글자 숨기기 버튼을 눌렀을때
$("#hideText").click(function(){
$("div").hide(); //div영역의 내용을 숨긴다.
});
//글자 보이기 버튼을 눌렀을때
$("#showText").click(function(){
$("div").show(); //div영역의 내용을 보인다.
});
});
html
<div class="hello">
<div class="text">안녕하세요!!</div>
</div>
css
.hello {
background-image:url("../images/~.png");
background-repeat: no-repeat;
background-position: center;
width: 400px;
height: 300px;
position: relative;
}
.hello .text {
bottom: 0;
color: brown;
font-family: Verdana !important;
font-size: 40pt !important;
font-weight: bold;
position: absolute;
text-shadow: 0 0 5px #000;
}
js
function hello() {
//아래 코드는 좌표값과 배경이미지의 크기를 난수로 대입하기 위해서 값을 얻고 있다.
var rnd1 = Math.floor(Math.random() * 20);
var rnd2 = Math.floor(Math.random() * 40);
var rnd3 = Math.floor(Math.random() * 3) + 100;
//글자 흔들기
$(".hello").css({
"bottom" : rnd1, "left" : rnd2
});
//배경 확대
$(".hello .text").css({"background-size" : rnd3 + "%"});
}
//0.01초마다 hello()함수가 호출된다.
setInterval(hello, 10);
=>Math.random()을 통해서 글자 위치를 바꿔주게 설정 (아래는 0~19, 왼쪽은 0~39까지)
=>setInterval() 함수는 일정한 시간 간격으로 코드를 반복 실행하는 함수(지속적으로 몇초마다 호출한다 ex)setInterval(hello,10) hello함수를 0.01초마다 호출하겠다)