Javascript ile CSS değiştirme
<!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