Takip Edin

JQUERY

Jquery .css( ) Kullanımı

Jquery'de .css( ) metodu kullanımı - öne çıkan görsel

Bu bölümde, Jquery ‘nin sahip olduğu .css( ) metodu üzerinden elemanların stillerinin değişimi ile alakalı örnekler yapılmaktadır.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery .css( ) Kullanımı</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <a href="#">link</a>
    <h3 id="header">Selectors</h3>
    <ul id="liste">
        <li class="item">Id</li>
        <li>Class <a href="#">link</a></li>
        <li class="item">Element</li>
    </ul>

    <script>
        $("#header").css("color","blue");

        $("#liste a").css("text-decoration","none");

        $("a").css("text-decoration","none");

        // Bir Elemana Birden Fazla Stil Verme

        var styles = 
        {
            color:"teal",
            fontSize:"20px",
            border:"1px solid red"
        }

        $("ul li").css(styles);

        // Jquery'nin kolaylığını kavramak açısından aşağıdaki kodda Javascript'le listelere nasıl renk verildiği gösterilmektedir:

        var listeler = document.querySelectorAll("li");

        for(var i = 0; i < listeler.length; i++) {
            listeler[i].style.color = "#1A5AA7";
        } 

        // Yukarıda bulunan styles nesnesi, ayrıca oluşturulmayıp direk .css() in içerisine aktarılmaktadır.

        $("a").css({
            color:"seagreen",
            fontSize:"20px",
            border:"1px solid red"
        });

        // ***************************************

        $(".item").css({
            display:"none"
        });
    </script>
</body>
</html>
Devamını oku

Popüler

error: Content is protected !!