javascript / Web Tasarım ve Programlama

Javascript ile CSS değiştirme

by admin_ufuk · Ekim 24, 2019

<!DOCTYPE html>
<html lang="en">

<style>
#kutu {
    width: 60%;
    padding-left: 1%;
}

img {
    width: 400px;
    height: 300px;
    margin-top: 30px;
}

#container {
    float: left;
    width: 100%;
    height: 100%;
}

#container2 {
    padding-left: 1%;
}

body {
    margin: auto;
}
</style>
<script>
function yasla(radioButon) {
            if (radioButon.value == "sol") {
                document.getElementById("yazi").style.textAlign = "left";
            }
            if (radioButon.value == "saga") {
                document.getElementById("yazi").style.textAlign = "right";
            }
            if (radioButon.value == "orta") {
                document.getElementById("yazi").style.textAlign = "center";
            }
            if (radioButon.value == "ikiTaraf") {
                document.getElementById("yazi").style.textAlign = "justify";
            }
        }

        function resimDuzelt(radioButon) {
            if (radioButon.checked == true) {
                if (radioButon.value == "golgeli") {
                    document.getElementById("res1").style.boxShadow = "15px 15px 15px";
                }
                if (radioButon.value == "yuvarlak") {
                    document.getElementById("res1").style.borderRadius = "400px";
                }
                if (radioButon.value == "cerceveli") {
                    document.getElementById("res1").style.border = "10px solid";
                }
            }
            if (radioButon.checked == false) {
                if (radioButon.value == "golgeli") {
                    document.getElementById("res1").style.boxShadow = "none";
                }
                if (radioButon.value == "yuvarlak") {
                    document.getElementById("res1").style.borderRadius = "0px";
                }
                if (radioButon.value == "cerceveli") {
                    document.getElementById("res1").style.border = "none";
                }
            }
        }

        function cerceveRenk(renk) {
            var secilenRenk = renk.value;
            document.getElementById("res1").style.borderColor = secilenRenk;
        }
</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Yaslama</title>   
   
</head>

<body>
    <div id="container">
        <div id="menu">
            <input type="radio" name="1" value="sol" onclick="yasla(this)">Sola Yasla <input type="radio" name="1"
                onclick="yasla(this)" value="saga">Sağa Yasla <input type="radio" onclick="yasla(this)" name="1"
                value="orta">Ortala <input type="radio" name="1" onclick="yasla(this)" value="ikiTaraf">İki Yana Yasla
        </div>
        <div id="kutu">
            <p id="yazi">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Est ultricies integer quis auctor elit. Nunc lobortis mattis aliquam faucibus purus
                in
                massa tempor. Risus in hendrerit gravida rutrum quisque non tellus orci. Dui faucibus in ornare quam
                viverra. Sagittis purus sit amet volutpat consequat mauris. Libero enim sed faucibus turpis in. Tellus
                cras
                adipiscing enim eu turpis egestas pretium aenean. Nisl rhoncus mattis rhoncus urna neque viverra. Enim
                sit
                amet venenatis urna cursus eget nunc scelerisque. Odio facilisis mauris sit amet massa vitae tortor
                condimentum lacinia. Eu scelerisque felis imperdiet proin fermentum. Sed cras ornare arcu dui vivamus.
                Mauris vitae ultricies leo integer malesuada nunc vel risus commodo. Hendrerit gravida rutrum quisque
                non.
                Curabitur vitae nunc sed velit.

                Nunc sed augue lacus viverra vitae congue eu consequat ac. Semper feugiat nibh sed pulvinar proin
                gravida
                hendrerit. Ut diam quam nulla porttitor massa id neque aliquam. Sed turpis tincidunt id aliquet risus
                feugiat. Dui accumsan sit amet nulla. Condimentum vitae sapien pellentesque habitant morbi tristique
                senectus et netus. Pellentesque dignissim enim sit amet venenatis urna cursus. Dignissim sodales ut eu
                sem
                integer vitae justo. At risus viverra adipiscing at. At urna condimentum mattis pellentesque id nibh
                tortor
                id.
            </p>
        </div>
    </div>

    <div id="container2">
        <div id="menu2">
            <input type="checkbox" name="1" value="golgeli" onclick="resimDuzelt(this)">Gölgeli <input type="checkbox"
                name="1" value="yuvarlak" onclick="resimDuzelt(this)">Yuvarlak <input type="checkbox"
                onclick="resimDuzelt(this)" name="1" value="cerceveli">Çerçeveli  <input type="color" name="1"
                onchange="cerceveRenk(this)">Çerçeve Rengi
        </div>
        <div id="resim">
            <img id="res1" src=http://www.birbilimbilisim.com/wp-content/uploads/2018/12/seagull-990930_960_720.jpg />
        </div>
    </div>

</body>

</html>

Güney

You may also like...

Bir cevap yazın Cevabı iptal et