С помощью JS изменить атрибут CSS/HTML | Я полный нуль
Объясните мне пожалуйста, как изменять например по щелчку с помощью JS атрибут в файле CSS или HTML, как происходит это, сама конструкция и метод, желательно правильно, чтобы в будущем знал, только сейчас решил изучать JS..
Чисто для примера: В файле CSS есть такая запись: #test{text-align:center;} В файле HTML есть такая запись: <p id="test">Текст по центру</p> Ну и кнопка какая нибудь, при щелчке на неё чтобы изменился (text-align) |
На вашем форуме очень спешат с ответом, и потому сам нашёл ответ:
<html> <head> <script type="text/javascript"> function text() {document.getElementById("test").style.textAlign="left";} </script> <style> #test{text-align:center;} </style> </head> <body> <button onclick="text()">Поместить текст с левой стороны</button> <p id="test">Текст по центру</p> </body> </html> |
Цитата:
Цитата:
|
Суть кнопки, при нажатии меняет фоновое изображение по функции JS.
Вот такой код у меня работает без проблем, с трудом кстати его написал: <html> <head> <script type="text/javascript"> function SmenabgImage(){ if (document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'){ document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'; } else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'){ document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")'; } else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")'){ document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")'; } else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")'){ document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'; }; } </script> </head> <body style='background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'> <button onclick="SmenabgImage()">Сменить картинку заднего фона</button> </body> </html> Но теперь мне нужно более сложная его версия, мне нужно в классе изменить фоновое изображение, делаю я это следующим образом: <html> <head> <script type="text/javascript"> function SmenabgImage(){ if (document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'){ document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'; } else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'){ document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")'; } else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")'){ document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")'; } else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")'){ document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'; }; } </script> <style> .styleBgImage{background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg");} </style> </head> <body class="styleBgImage"> <button onclick="SmenabgImage()">Сменить картинку заднего фона</button> </body> </html> Но у меня не работает и я не понимаю что именно не так, я сдаюсь, помогите. Ссылки на изображения рабочие. |
MSSERG,
неуказан индекс элемента который нужен из списка getElementsByClassName |
MSSERG,
и в теге body нет атрибута style |
MSSERG,
https://learn.javascript.ru/styles-and-classes Цитата:
Цитата:
значение будет зависеть от браузера, а не от того что вы в style изначально прописали. картинки в массив и гоняйте индекс по кругу |
MSSERG,
<html> <head> <meta charset="utf-8"> <script type="text/javascript"> var n = 0; function SmenabgImage(){ n++; if(n == 4) n = 0; document.getElementsByClassName('styleBgImage')[0].style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/'+['white','red','green','blue'][n]+'.jpg")' } </script> <style> .styleBgImage{background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg");} </style> </head> <body class="styleBgImage"> <button onclick="SmenabgImage()">Сменить картинку заднего фона</button> </body> </html> |
Спасибо большое!
Сейчас буду разбирать как это работает, теперь понял что значит по индексу гонять! Ещё раз спасибо, сейчас же начну разбираться более углублённо в этом деле) К карме + |
Нет, вот так
var ChBkg= new function(){ var n = 0, dir= 'http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/', files=['white.jpg','green.png','yellow.gif','etc.etc'], s=document.querySelector('.styleBgImage').style; return function(){ if(n==images.length-1) n=0; s.backgroundImage='url("'+dir+files[n++]+'")'; }; }; Потому что нельзя конкатенировать имя файла с типом файла никогда. Да и dir нежелательно, но можно. |
Часовой пояс GMT +3, время: 17:30. |