Форум

MSSERG · #1 (**permalink**) 07.09.2016, 21:52

Объясните мне пожалуйста, как изменять например по щелчку с помощью JS атрибут в файле CSS или HTML, как происходит это, сама конструкция и метод, желательно правильно, чтобы в будущем знал, только сейчас решил изучать JS..

Чисто для примера:

В файле CSS есть такая запись: #test{text-align:center;}

В файле HTML есть такая запись: <p id="test">Текст по центру</p>

Ну и кнопка какая нибудь, при щелчке на неё чтобы изменился (text-align)

MSSERG · #2 (**permalink**) 08.09.2016, 01:47

На вашем форуме очень спешат с ответом, и потому сам нашёл ответ:

<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>

laimas · #3 (**permalink**) 08.09.2016, 03:44

Сообщение от MSSERG

На вашем форуме очень спешат с ответом,

А обязаны спешить?

Сообщение от MSSERG

потому сам нашёл ответ

Это даже полезнее, чем чей-то ответ.

MSSERG · #4 (**permalink**) 08.09.2016, 22:49

Суть кнопки, при нажатии меняет фоновое изображение по функции 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>

Но у меня не работает и я не понимаю что именно не так, я сдаюсь, помогите.

Ссылки на изображения рабочие.

рони · #5 (**permalink**) 08.09.2016, 23:03

MSSERG,
неуказан индекс элемента который нужен из списка getElementsByClassName

рони · #6 (**permalink**) 08.09.2016, 23:06

MSSERG,
и в теге body нет атрибута style

рони · #7 (**permalink**) 08.09.2016, 23:27

MSSERG,
https://learn.javascript.ru/styles-and-classes

Цитата:

Свойство style содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS.

Сообщение от MSSERG

Вот такой код у меня работает без проблем

если даже код написать правильно, от этого он не станет рабочим -- сравнивать значения style.backgroundImage и строки опасно, ~~Не все йогурты одинаково полезны~~
значение будет зависеть от браузера, а не от того что вы в style изначально прописали.
картинки в массив и гоняйте индекс по кругу

рони · #8 (**permalink**) 08.09.2016, 23:36

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>

MSSERG · #9 (**permalink**) 10.09.2016, 01:42

Спасибо большое!

Сейчас буду разбирать как это работает, теперь понял что значит по индексу гонять!

Ещё раз спасибо, сейчас же начну разбираться более углублённо в этом деле)

К карме +

warren buffet · #10 (**permalink**) 11.09.2016, 05:46

Нет, вот так

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 нежелательно, но можно.

Форум

Справочник

Discord чат

Курсы javascript