Проблема с получением настройки стиля из javascript

Так что я пытаюсь получить его так, что каждый раз при нажатии кнопки круг становится шире. Я столкнулся с наиболее своеобразной проблемой, это блок кода, который, когда вы помещаете его в метод alert(), показывает его правильно, однако он показывает как nul, если вы поместите его в переменную, а затем отобразите его. Вот полный код.Проблема с получением настройки стиля из javascript

<!doctype html> 
<html> 
<head> 
<title>CSS Basics</title> 
<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<style> 
    #circle { 
     width:200px; 
     height:200px; 
     border-radius:200px; 
     background-color:red; 
    } 
    </style> 

</head> 

<body> 
    <div id="circle">asdfasdf</div> 
    <button id="Saver"> Press me to save your text </button> 
    <input id="Text" type="text" value="test"/> 

    <script type="text/javascript"> 

     var divId="circle"; 
     var obj= document.getElementById("Saver"); 
     var it234 = 1; 
     //THIS IS A COMMENT DOESNT THSI MAKE YOU HAPPY 
     obj.onclick=function() { 

      document.getElementById("circle").innerHTML = document.getElementById("Text").value; 
      it234 = parseInt(document.getElementById("circle").style.width.substring(0,3)); 
      //document.getElementById("circle").style.width="300px"; 
      alert(it234); 
     } 

    </script> 
</body> 
</html>

А вот раздел в процессе

Это должно работать, но не делает

obj.onclick=function() { 

      document.getElementById("circle").innerHTML = document.getElementById("Text").value; 
      it234 = parseInt(document.getElementById("circle").style.width.substring(0,3)); 
      //document.getElementById("circle").style.width="300px"; 
      alert(it234); 
     }

Однако вместо работы он показывает предупреждение с Нан. Как я могу получить ширину этого div, сохраненного в переменную (желательно в формате строки)?

источник

2016-02-03 ProgrammerInProgress

Попробуйте использовать 'element.offsetWidth' за [это] (http://stackoverflow.com/a/294273/1108513). Ответ. – timtim17

Я мог ошибаться здесь, но я уверен, что если у вас нет стиля на элементе, чтобы дать ему фиксированную ширину, тогда стиль. Вам нужно указать начальную ширину, чтобы она имела стиль для ширины. –

Как @ timtim17 с el.offsetWidth работает. – dexhering

Javascripts element.style возвращает только встроенные стили, а не набор стилей в таблицах стилей или тегах стиля, так document.getElementById("circle").style.width возвращает ничего, просто пустую строку, и разбор, что целое возвращает NaN (не число).

Использование getComputedStyle бы получить вам вычисленный стиль вместо

var divId = "circle"; 
var obj = document.getElementById("Saver"); 
var it234 = 1; 

obj.addEventListener('click', function() { 

    document.getElementById("circle").innerHTML = document.getElementById("Text").value; 
    console.log(document.getElementById("circle").style.width) 

    var elem = document.getElementById("circle"); 
    var style = window.getComputedStyle(elem); 
    var width = style.getPropertyValue('width'); 

    it234 = parseInt(width.replace(/\D/g,'')); 

    alert(it234); 

}, false);

источник

2016-02-03 01:31:33 adeneo

Этот метод работает с любой переменной, которую я определяю в css? Как это для совместимости с браузером? – ProgrammerInProgress

Да, он работает с любым свойством, установленным в css, и поддерживается от IE9 и выше, поэтому он в основном поддерживается во всех браузерах, которые вы * должны * поддерживать. – adeneo

IE9 означает «интернет-исследователь», почему бы не поддержать хром, или я что-то упустил? – ProgrammerInProgress

Используйте element.offsetWidth, чтобы получить ширину.

источник

2016-02-03 01:39:04 timtim17

Обратите внимание, что 'offsetWidth' включает границы и отступы – adeneo

Является ли их список где-нибудь, который показывает, какое имя использовать в javascript для получения переменной стиля css? – ProgrammerInProgress

@ProgrammerInProgress - это зависит от 'offsetWidth',' clientWidth' и т. Д. Не возвращает стилей CSS, они возвращают фактическую вычисленную ширину, включая или исключая такие вещи, как полосы прокрутки, отступы, поля, границы и т. Д. Чтобы получить фактический стиль набора, вы должны использовать 'element.style' для встроенных стилей и' getComputedStyle' для вычисленного стиля. – adeneo

Проблема с получением настройки стиля из javascript

ответ

Смежные вопросы