Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 24.07.2018, 14:55
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   div.test {
      border: 2px solid green;
      display: inline;
      padding: 0 5px;
      text-align: center;
      margin-right:30px;
   }

  </style>


</head>

<body>
  <script>
    function fn(str)
    {
      var container = document.createElement("div")
      container.appendChild(document.createTextNode(str));
      document.body.appendChild(container);
      container.classList.add("test")
    }

    var arr = 'hello world hi javascript forum'.split(' ');
    arr.forEach(function(it) {
       fn(it);
    });
  </script>

</body>
</html>
Ответить с цитированием
  #12 (permalink)  
Старый 24.07.2018, 15:21
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Спасибо, но а если без margin-right:30px; это сильно будет сложнее?
Ответить с цитированием
  #13 (permalink)  
Старый 24.07.2018, 16:13
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Начинающий-Js-кодер
а если без margin-right:30px; это сильно будет сложнее?
Попробуйте... А зачем?
Ответить с цитированием
  #14 (permalink)  
Старый 24.07.2018, 16:26
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Просто если нужно рядом с элементом линию будет нарисовать, а из-за margin-right:30px; она будет на 30 px подальше.
Ответить с цитированием
  #15 (permalink)  
Старый 24.07.2018, 16:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Начинающий-Js-кодер,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
      position: relative;
  }

   div.test {
      border: 2px solid green;
      display: inline;
      padding: 0 5px;
      text-align: center;
      position: absolute;
   }

  </style>


</head>

<body>
  <script>
    function fn(str, left)
    {
      var container = document.createElement("div")
      container.appendChild(document.createTextNode(str));
      document.body.appendChild(container);
      container.classList.add("test");
      container.style.left = left + "px"
      return container.offsetWidth
    }

    var arr = 'hello world hi javascript forum'.split(' '), left = 0;
    arr.forEach(function(it) {
      left += fn(it,left) + 30;
    });
  </script>

</body>
</html>
Ответить с цитированием
  #16 (permalink)  
Старый 24.07.2018, 16:46
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

проще getComputedStyle
https://learn.javascript.ru/styles-and-classes
Ответить с цитированием
  #17 (permalink)  
Старый 24.07.2018, 16:59
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Спасибо огромное
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не корретная работа выбора элемента в динамическом <select> CTABP Элементы интерфейса 3 19.09.2017 15:24
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
как узнать размер в пикселях элемента созданного элемента span Faab Общие вопросы Javascript 2 09.11.2013 16:46
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 17:58