Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2016, 21:52
Аватар для MSSERG
Интересующийся
Отправить личное сообщение для MSSERG Посмотреть профиль Найти все сообщения от MSSERG
 
Регистрация: 07.09.2016
Сообщений: 13

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



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

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

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

Ну и кнопка какая нибудь, при щелчке на неё чтобы изменился (text-align)
Ответить с цитированием
  #2 (permalink)  
Старый 08.09.2016, 01:47
Аватар для MSSERG
Интересующийся
Отправить личное сообщение для MSSERG Посмотреть профиль Найти все сообщения от MSSERG
 
Регистрация: 07.09.2016
Сообщений: 13

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

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

Последний раз редактировалось MSSERG, 08.09.2016 в 01:52.
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2016, 03:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от MSSERG
На вашем форуме очень спешат с ответом,
А обязаны спешить?

Сообщение от MSSERG
потому сам нашёл ответ
Это даже полезнее, чем чей-то ответ.

Последний раз редактировалось laimas, 08.09.2016 в 05:41.
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2016, 22:49
Аватар для MSSERG
Интересующийся
Отправить личное сообщение для MSSERG Посмотреть профиль Найти все сообщения от MSSERG
 
Регистрация: 07.09.2016
Сообщений: 13

Суть кнопки, при нажатии меняет фоновое изображение по функции 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, 08.09.2016 в 22:51. Причина: Дополнил пояснением
Ответить с цитированием
  #5 (permalink)  
Старый 08.09.2016, 23:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

MSSERG,
неуказан индекс элемента который нужен из списка getElementsByClassName
Ответить с цитированием
  #6 (permalink)  
Старый 08.09.2016, 23:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

MSSERG,
и в теге body нет атрибута style
Ответить с цитированием
  #7 (permalink)  
Старый 08.09.2016, 23:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

MSSERG,
https://learn.javascript.ru/styles-and-classes
Цитата:
Свойство style содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS.
Сообщение от MSSERG
Вот такой код у меня работает без проблем
если даже код написать правильно, от этого он не станет рабочим -- сравнивать значения style.backgroundImage и строки опасно, Не все йогурты одинаково полезны
значение будет зависеть от браузера, а не от того что вы в style изначально прописали.
картинки в массив и гоняйте индекс по кругу
Ответить с цитированием
  #8 (permalink)  
Старый 08.09.2016, 23:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

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>
Ответить с цитированием
  #9 (permalink)  
Старый 10.09.2016, 01:42
Аватар для MSSERG
Интересующийся
Отправить личное сообщение для MSSERG Посмотреть профиль Найти все сообщения от MSSERG
 
Регистрация: 07.09.2016
Сообщений: 13

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

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

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

К карме +
Ответить с цитированием
  #10 (permalink)  
Старый 11.09.2016, 05:46
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Нет, вот так

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 нежелательно, но можно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не срабатывает анимация для transform если её добавить с помощью js Mixeyka Элементы интерфейса 4 11.07.2016 11:16
Можно ли заккоментировать HTML и CSS с помощью JS? AlexKain Элементы интерфейса 6 10.06.2016 16:53
Как изменить Select с помощью JS Alex921 Общие вопросы Javascript 4 04.01.2016 16:55
Как с помощью JS изменить description и keywords в HTML странице ? MSDeveloper Элементы интерфейса 1 05.08.2015 16:07
Нужно с помощью JS записывать данные в БД d!mm Общие вопросы Javascript 2 01.11.2008 18:36