С помощью 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, время: 02:45. |