Значение диапазона внутри значения стиля
это может быть очень глупый вопрос, но возможно ли это?
хорошо, у меня есть своего рода слайдер на странице html. вот как это проявляется сейчас:
<p>Illustrator</p>
<div class = "w3-light-grey w3-round-xlarge w3-small">
<div class = "w3-container w3-center w3-round-xlarge w3-teal" style = "width:75%">75%</div>
</div>
Это показывает бар,
ну, чего я хочу добиться, так это возможности изменить это значение на 75% на данные моего скрипта:
style = "width:75%">
как у меня есть скрипт, он извлекает значения с моего сервера:
var input = "10;11;15";
var arr = input.split(";");
document.getElementById("humid").innerHTML = (arr[0 ]);
это показывает мои данные просто нормально
<span id = "humid">0</span>
то, что я хочу сделать, это что-то вроде этого, но я не знаю, как:
Я хочу, чтобы это значение из style="width:75%"> было значением влажности. поэтому, если мое значение влажности равно 50%, ширина будет равна 50%
я пробовал это, но безрезультатно
style = "width:humid+%">
or style = "width:(humid)+%">
Я все еще учусь, с уважением
<!DOCTYPE html>
<html>
<title>TESt</title>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
<body class = "w3-light-grey">
<p>Original</p>
<div class = "w3-light-grey w3-round-xlarge w3-small">
<div class = "w3-container w3-center w3-round-xlarge w3-teal" style = "width:75%">75%</div>
</div>
<p>Media</p>
<div class = "w3-light-grey w3-round-xlarge w3-small">
<div class = "w3-container w3-center w3-round-xlarge w3-teal" style = "#humid">0</div>
</body>
<script>
var input = "10;11;15";
var arr = input.split(";");
//alert(arr[1 ]);
document.getElementById("humid").innerHTML = (arr[0]);
document.getElementById("temp").innerHTML = (arr[1 ]);
document.getElementById("uv").innerHTML = (arr[2 ]);
</script>
</html>
Получить мой ввод:
function readForestall() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ForestAll").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "readFORESTALL", false);
xhttp.send();
}
setInterval(function() {
readForestall();
}, 5000);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Транк,
я не совсем уверен, почему вы хотите вызывать ширину из массива и использовать DOM, когда вы можете просто использовать CSS для выполнения этого с помощью @media. поправьте меня, если я ошибаюсь, но вы просто пытаетесь настроить ширину на основе значений текущей ширины устройства? это кажется большой работой для того, что является простым решением.
используйте что-то вроде установки соответствующей ширины в зависимости от ширины экрана:
@media only screen and (max-width: 600px) {
#humid { width: 75%; }
}
кроме того, вполне вероятно, что вы неправильно передаете свой массив, и он возвращает NULL (0). вы можете проверить это с помощью отладчика и убедиться, что он передается правильно. Для этого в FireFox есть встроенный отладчик. используйте CMD/CTRL+SHIFT+K, чтобы открыть отладчик в FireFox.
P.S. вы неправильно передаете массив. вы настраиваете его для изменения «innerHTML», который меняет все внутри
document.getElementById("humid").innerHTML = (arr[0 ]);
если вы измените "(arr[0 ]);" на что-то вроде «строка», он заменит значение 0 на «строку».
Если я правильно понимаю ваш вопрос, вы хотите изменить width элемента на основе полученной вами переменной. В этом случае вы можете изменить встроенный стиль с помощью JavaScript. Вам просто нужно захватить элемент и установить стиль, присвоив значения свойствам свойства style элемента.
Если вы хотите изменить ширину, вы можете использовать следующее:
element.style.width = '50%'
Он устанавливает ширину на 50%. Вы также можете включить такую переменную:
const width = 50
element.style.width = `${width}%`
Я создал фрагмент ниже, где вы можете установить значение, используя ввод, и он обновляет как ширину, так и содержимое этого div. Вы можете нажать на кнопку «Выполнить фрагмент кода» и увидеть результат вживую.
const barLeft = document.querySelector('#bar-left');
const barRight = document.querySelector('#bar-right');
const input = document.querySelector('[name = "width"]');
const error = document.querySelector('.error');
input.addEventListener('input', (e) => {
const widthLeft = Number(e.target.value);
const widthRight = 100 - widthLeft;
if (widthLeft < 0 || widthLeft > 100) {
error.textContent =
"We don't do that here. Width must be between 0 and 100.";
return;
}
error.textContent = '';
barLeft.textContent = `${widthLeft}%`;
barLeft.style.width = `${widthLeft}%`;
barRight.textContent = `${widthRight}%`;
barRight.style.width = `${widthRight}%`;
});body {
font-family: sans-serif;
margin: 0;
text-align: center;
}
.outer {
display: flex;
margin-bottom: 2rem;
}
.inner {
background-color: lightcoral;
box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.2) inset;
height: 100%;
padding: 1rem;
}
.inner--blue {
background-color: lightblue;
}
.controls {
margin-bottom: 1rem;
}
input {
font-family: inherit;
font-size: inherit;
padding: 0.5rem 1rem;
}
.error {
color: #d32f2f;
}<div class = "outer">
<div class = "inner" id = "bar-left" style = "width: 75%">75%</div>
<div class = "inner inner--blue" id = "bar-right" style = "width: 25%">25%</div>
</div>
<div class = "controls">
<label for = "width">First bar's width:</label>
<input type = "number" name = "width" id = "width" min = "5" max = "95" value = "75" />
</div>
<div class = "error"></div>Обновление: обновлен ваш пример ниже. Убедитесь, что вы закрыли свои теги, и узнайте, как добавлять ids к элементам.
<body class = "w3-light-grey">
<p>Media</p>
<div class = "w3-light-grey w3-round-xlarge w3-small">
<div class = "w3-container w3-center w3-round-xlarge w3-teal" id = "humid">
0
</div>
</div>
div>
<script>
var input = '10;11;15';
var arr = input.split(';');
// update the content of the div with ID "humid"
document.getElementById('humid').textContent = arr[0];
// change the width of the div with ID "humid"
document.getElementById('humid').style.width = `${arr[0]}%`;
</script>
</body>
большое спасибо, но это сложно для меня. что мне действительно нужно, так это индикатор выполнения со значениями, которые я получаю от своих устройств.. style = "width:75%"> я хочу, чтобы этот бит "width:75%" был изменен на мое значение из "document.getElementById("влажный" ).innerHTML = (обр[0]);" так что 75% изменится на значение моего устройства влажности.
Это объяснено выше, и вы можете найти эти две строки во фрагменте: barLeft.textContent = `${widthLeft}%`; barLeft.style.width = `${widthLeft}%`;
Я пробовал, но мне не удалось заставить его работать с моим кодом. Можете ли вы показать мне мой собственный опубликованный код?
Если вы можете обновить свой исходный вопрос, где span находится внутри div, я могу попробовать. На данный момент мне не очень ясно.
Хорошо, я разместил полный тестовый шаблон, посмотрите сценарий в конце. вот как я получаю свои устройства
Я только что обновил его, надеюсь, он работает.
Я не знаю, почему мое сообщение не появилось, но большое спасибо, все работает отлично!! именно то, что мне было нужно. Спасибо за ваше время !!
у меня есть 1 быстрый вопрос, он работает, как и ожидалось, с пользовательским вводом, но когда я хочу изменить ввод, он больше не работает. посмотрите под моим обновленным кодом, как я получаю ввод. если я изменю imput = "ForestALL", это не сработает.
спасибо за ответ, я просто хочу, чтобы это значение style = "width:75%"> было значением влажности... возможно ли это?