Изменение свойства по id

@Blok1 · Регистрация: 24.02.2014

Author24 — интернет-сервис помощи студентам

Приветствую, у меня вопрос возник, хочу ширину изменять от 0 до 300 у дива, но она не изменяется... подскажите, в чем ошибка по коду?

Javascript

 var arrowWidth = 0;
  setInterval(function() {  
    arrowWidth = document.getElementById('steps-arrow1').style.width;
    arrowWidth += 1 + 'px';
  }, 100);
  setTimeout( function(){ 
    clearInterval(arrowWidth);
  }, 3000);

HTML5

1	<div id="steps-arrow1" class="steps-arrow1"></div>

CSS

   .steps-arrow1 {
      position: absolute;
      left: 400px;
      top: 200px;
      background-image: url(img/arrow1.png);
      height: 100px;
      width: 0px;
    }

@Shakalaka · 15.04.2015, 19:33

element.style.width получает/изменяет ширину заданную через инлайновый стиль <div style="width:100px; /* вот этот width">
element.offsetWidth - текущая ширина элемента

@Blok1 · 15.04.2015, 19:49 **[ТС]**

Shakalaka, тут еще кое-что, когда я прибавляю в очередной итерации, то прибавляется значения как строка "1px1px1px...". Тут parseInt нужно использовать, но он у меня почему-то не работает)

@Shakalaka · 15.04.2015, 21:13

Как это не работает?)) А вообще при каждой итерации

Javascript

1	arrowWidth.style.width = arrowWidth.offsetWidth + 1 + 'px';

@kalabuni · 15.04.2015, 21:17

Shakalaka, это вы полагаете, что arrowWidth является ссылкой на объект document.getElementById('steps-arrow1')
а ТС-то думает совсем иначе - посмотрите внимательно на строку #3 самого первого его кода

@Shakalaka · 15.04.2015, 21:19

kalabuni, таки да) я имел в виду arrowWidth = document.getElementById('steps-arrow1')

Новые блоги и статьи
Как написать микросервис на Go/Golang InfoMaster 14.01.2025 Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .	Как написать микросервис с нуля на C# InfoMaster 14.01.2025 В современном мире разработки программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот архитектурный подход предполагает. . .	Как создать интернет-магазин на PHP и JavaScript InfoMaster 14.01.2025 В современном мире электронная коммерция стала неотъемлемой частью бизнеса. Создание собственного интернет-магазина открывает широкие возможности для предпринимателей, позволяя достичь большей. . .	Как написать Тетрис на Ассемблере InfoMaster 14.01.2025 Тетрис – одна из самых узнаваемых и популярных компьютерных игр, созданная в 1984 году советским программистом Алексеем Пажитновым. За прошедшие десятилетия она завоевала симпатии миллионы людей по. . .	Как создать игру "Танчики" на Unity3d и C# InfoMaster 14.01.2025 Разработка игр – это увлекательный процесс, сочетающий в себе творчество и технические навыки. В этой статье мы рассмотрим создание классической игры "Танчики" с использованием Unity3D и языка. . .	Организую платный онлайн микро-курс по доработке Android-клиента Telegram _Ivana 14.01.2025 Официальная версия и распространенные форки не полностью устраивают? Сделай свою кастомную версию клиента! 4 занятия по 2 часа (2 недели пн, ср 19:00-21:00 по Москве). Первое вводное занятие. . .
Как создать приложение для фитнеса для iOS/iPhone на Kotlin InfoMaster 14.01.2025 Создание собственного фитнес-приложения — это не только захватывающий, но и полезный процесс, ведь оно может стать вашим верным помощником на пути к здоровому и активному образу жизни. В современных. . .	Как создать приложение магазина для iOS/iPhone на Swift InfoMaster 14.01.2025 Введение в разработку iOS-приложений Разработка приложений для iPhone и других устройств на базе iOS открывает огромные возможности для создания инновационных мобильных решений. В данной статье мы. . .	Это работает. Скорость асинхронной логики велика. Вопрос видимо останется в стабильности. Плата - огонь! Hrethgir 13.01.2025 По прошлому проекту в Logisim Evolution https:/ / www. cyberforum. ru/ blogs/ 223907/ blog8781. html прилагаю файл архива проекта в Gowin Eda. Восьмибитный счётчик из сумматора+ генератор сигнала. . .	UserScript для подсветки кнопок языков программирования в зависимости от текущего раздела volvo 13.01.2025 В результате работы этого скрипта подсвечиваются нужные кнопки не только в форме быстрого ответа, но и при редактировании сообщения: / / ==UserScript== / / @name CF_DefaultLangSelect / / . . .	Введение в модели и алгоритмы машинного обучения InfoMaster 12.01.2025 Машинное обучение представляет собой одну из наиболее динамично развивающихся областей искусственного интеллекта, которая фокусируется на разработке алгоритмов и методов, позволяющих компьютерам. . .	Как на Python создать нейросеть для решения задач InfoMaster 12.01.2025 В контексте стремительного развития современных технологий особое внимание уделяется таким инструментам, как нейросети. Эти структуры, вдохновленные биологическими нейронными сетями, используются для. . .

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	15.04.2015, 19:33	2
	element.style.width получает/изменяет ширину заданную через инлайновый стиль <div style="width:100px; /* вот этот width"> element.offsetWidth - текущая ширина элемента 0

@Blok1 9 / 9 / 5 Регистрация: 24.02.2014 Сообщений: 257
	15.04.2015, 19:49 [ТС]	3
	Shakalaka, тут еще кое-что, когда я прибавляю в очередной итерации, то прибавляется значения как строка "1px1px1px...". Тут parseInt нужно использовать, но он у меня почему-то не работает) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	15.04.2015, 21:17	5
	Shakalaka, это вы полагаете, что arrowWidth является ссылкой на объект document.getElementById('steps-arrow1') а ТС-то думает совсем иначе - посмотрите внимательно на строку #3 самого первого его кода 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	15.04.2015, 21:19	6
	kalabuni, таки да) я имел в виду arrowWidth = document.getElementById('steps-arrow1') 0