Как напечатать div ширину или цвет с помощью JS innerHTML?

Я не могу понять, как получить параметр CSS (правильный термин?) Или значения для отображения в таких вещах, как p с getElementById(). InnerHTML. Прошу прощения, но это два вопроса - когда значение CSS является числом, мне нужно использовать toString или что-то в этом роде?Как напечатать div ширину или цвет с помощью JS innerHTML?

Я был бы признателен за чистый ответ JS, но jQuery тоже прекрасен, если вы считаете, что это лучше всего. Я делаю это в приложении в своем телефоне под названием HTML + CSS + Javascript - я не знаю, как можно получить доступ к библиотеке jQuery.

HTML:

<body> 
    <h1>Practice Page</h1> 
    <div id="box"> 
     <div id="runner"></div> 
    </div> 
    <p id="color"></p> 

    <p id="width"></p> 

    <script src="practiceA.js" type="text/javascript"></script> 

</body> 
</html>

JS:

document.getElementById('color').innerHTML= 
document.getElementById('runner').style.backgroundColor; 

document.getElementById('width').innerHTML= 
document.getElementById('box').style.width;

И CSS:

#runner{ 
    height:10px; 
    width:10px; 
    background-color: red; 
} 

#box{ 
    height:100px; 
    width:100px; 
    border:1px solid black; 
}

источник

2016-05-27 Sam Hodak

-1

You can't access CSS properties that were set from a CSS file using element.style. Вместо этого вам нужно использовать getComputedStyle, но это может стать беспорядочным с совместимостью с браузером, а что нет, поэтому я рекомендую использовать jQuery, как показано ниже. (Если вы решили не использовать JQuery, ответ я связывал имеет хорошую вспомогательную функцию, которую вы можете использовать)

JQuery пример:

$('#color').html($('#runner').css('backgroundColor'));

#runner{ 
 
    height:10px; 
 
    width:10px; 
 
    background-color: red; 
 
} 
 

 
#box{ 
 
    height:100px; 
 
    width:100px; 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
<h1>Practice Page</h1> 
 
<div id="box"> 
 
    <div id="runner"></div> 
 
</div> 
 
<p id="color">x</p> 
 

 
<script src="practiceA.js" type="text/javascript"></script> 
 

 
</body>

источник

2016-05-27 06:18:13 libcthorne

Я думал, что это ответ на мой вопрос, и что ссылка на дубликат сделала, но это не помогло мне показать, как отображать это число на экране. У меня могут быть переменные, которые определены как значения, которые я хотел, но я их не вижу. И если я хочу видеть их как innerHTML, мне нужно использовать toString? Как document.write, я бы предположил, что нет? –

Nevermind! Теперь я понимаю jQuery. Тем не менее, пытаясь понять, работает ли это, хотя ... –

Как напечатать div ширину или цвет с помощью JS innerHTML?

ответ

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