5. css 관련 메서드

2023. 3. 28. 11:19ㆍLibrary/jQuery

728x90
반응형

1
2 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
    .winter { border:7px solid silver; }
    .summer { border:7px solid lightblue; }
</style>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('span').css({background:'pink', color:'blue', "font-weight":'bold'});

        $('#img1').addClass('winter').css('width','200');

        $('button:eq(0)').click(function(){
            $('#img1').toggleClass('summer');
        });

        $('button:eq(1)').click(function(){
            $('#img1').removeClass('winter');
        });
    });
</script>
</head>
<body>
    <span>CSS 관련 메서드</span> <br /><br /> 
    <div id="Mt">
    <img id="img1" src="../images/magnum2.jpg" />
    </div>
    <button>토글</button>
    <button>removeClass</button>

</body>
</html>

Attribute 관련 메서드

attr 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
    .winter { border:7px solid silver; }
    .summer { border:7px solid lightblue; }
</style>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        alert($('a').attr('href')); //[1] get

        $('img:first').mouseover(function() {
            $(this).attr("src", "../images/magnum2.jpg"); //[2] set
        });

        $('img:first').mouseout(function() {
            $(this).attr("src", "../images/magnum1.jpg");
        });

        $('#btnRemove').click(function() {
            $('img:eq(1)').removeAttr("src"); // src 속성 삭제
        });
    });
</script>
<style type="text/css">
img{width:200px;}
</style>
</head>
<body>
    <a href="http://www.naver.com/">네이버</a><br /><br />
    <img src="../images/magnum1.jpg" />
    <img src="../images/dog.jpg" alt="강아지" />
    <input id="btnRemove" type="button" value="src속성 제거" />

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!--  
<style type="text/css">
    img{width:200px;}
</style>
-->
<style>
    .winter { border:7px solid silver; }
    .summer { border:7px solid lightblue; }
</style>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#photos img').attr({
            border : '3px',
            height : '100'
        }).attr('title',function(idx){
            return (idx+1)+"번째 이미지"
        });

        /*
        $('#photos img').attr('width',function(idx){
            return (idx+1)*100;
        });
        */

        $('#photos img').each(function(idx,item){
            $(item).attr('width',(idx+1)*100);
        })

    });
</script>
</head>
<body>
    <div id="photos">
        <img src="../images/dog.jpg" />
        <img src="../images/magnum1.jpg" />
        <img src="../images/snow.jpg" />
        <img src="../images/wood.JPG" />
        <img src="../images/magnum2.jpg" />
    </div>
</body>
</html>
728x90
반응형

'Library > jQuery' 카테고리의 다른 글

7. 이벤트 관련 메서드  (0) 2023.03.28
6. 탐색메서드  (0) 2023.03.28
4. 문서 객체 조작  (0) 2023.03.28
3. 기본메서드  (0) 2023.03.28
2. 선택자  (0) 2023.03.28

관련글

댓글 0

티스토리툴바