首頁猿問如何使用 JavaScript...

如何使用 JavaScript 變量的值更新虛擬 html 元素的樣式屬性？

JavaScript

躍然一笑 2023-04-14 17:27:16

我正在處理這個 JavaScript 圖像（和文本）滑塊。我在 JavaScript 中創建了一個幻燈片列表，并將其附加到 DOM 中的一個 div：let slidesHtml = '<ul style="width: ' + slidesListWidth + '; transform: translateX(' + translateAmount + ')">'; for (let i = 0; i < slidesLen; i++) { slidesHtml += '<li style="width: ' + slideWidth + '">' + '<img src="' + slides[i].image + '" alt="' + slides[i].text + '"><span class="text">' + slides[i].text + '</span></li>'; } slidesHtml += '</ul>' sliderControls.insertAdjacentHTML('afterend', slidesHtml);在上面的代碼中，translateAmount當 JavaScript 變量let translateAmount = 0更改其值（從 0 到不同的百分比）時不會更新。 let slides = [{ text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque.", image: "https://picsum.photos/1200/600?gravity=east" }, { text: "Sit quis provident reiciendis sed optio molestias impedit maiores nesciunt!", image: "https://picsum.photos/1200/600?gravity=west" }, { text: "Odio mollitia inventore nostrum quasi labore architecto quis id repudiandae quidem!", image: "https://picsum.photos/1200/600?gravity=north" } ];let slider = document.getElementById('imageSlider');let sliderControls = document.getElementById('sliderControls');let slidesLen = slides.length;let slidesListWidth = slidesLen + '00%';let slideWidth = (1 / slidesLen * 100) + '%';let clickCount = 0;let translateAmount = 0;function updateAmount() { translateAmount = clickCount * 1 / slidesLen * 100 + '%'; console.log(translateAmount);}function nextSlide() { if (Math.abs(clickCount) < slidesLen - 1) { clickCount--; } else { clickCount = 0; } updateAmount();}function prevSlide() { if (clickCount < 0) { clickCount++; } else { clickCount = 1 - slidesLen; } updateAmount();}

查看完整描述

3 回答

喵喔喔

TA貢獻1735條經驗獲得超5個贊

你修改了值而不是元素的樣式（它不是數據綁定的，因為它在例如反應中），所以你必須把你的 UL 變成變量，然后在 updateAmount 中你應該做類似的事情

function updateAmount() {
    translateAmount = clickCount * 1 / slidesLen * 100 + '%';
    yourUlElement.style.transform = 'translateX(' + translateAmount + ')';
}

反對回復 2023-04-14

莫回無

TA貢獻1865條經驗獲得超7個贊

您沒有向 DOM 寫入任何內容，您只是設置了一個 JavaScript 變量。

在您的 updateAmount() 函數中，您需要獲取對 DOM 中 ul 元素的引用，并使用更新后的值設置樣式屬性。

也就是說，這不是一個很好的實現。而不是使用全局變量，也許可以嘗試為此創建一個封裝的組件，其中包含您在單擊下一個和上一個按鈕時更新的本地狀態。此外，通過使用模板字符串而不是所有這些連接，您可以大大提高可讀性。

反對回復 2023-04-14

HUWWW

TA貢獻1874條經驗獲得超12個贊

有完整的工作滑塊，供可能需要的人使用：

(function() {

let slides = [{

text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque.",

image: "https://picsum.photos/1200/600?gravity=east"

{

text: "Aperiam eligendi animi, suscipit repellendus tempore amet totam excepturi, porro facere nulla dignissimos pariatur doloribus dolorum sunt, et veritatis expedita consectetur.",

image: "https://picsum.photos/1200/600?gravity=west"

{

text: "Odio mollitia inventore nostrum quasi labore architecto quis id repudiandae quidem!",

image: "https://picsum.photos/1200/600?gravity=north"

{

text: "Iusto fugiat enim voluptate eos placeat quis veniam quod inventore ipsum sapiente vel, earum, ratione neque. Inventore nostrum quasi labore architecto quis id repudiandae quidem!",

image: "https://picsum.photos/1200/600?gravity=south"

}

];

let slider = document.getElementById('imageSlider');

let sliderControls = document.getElementById('sliderControls');

let slidesLen = slides.length;

let slidesListWidth = slidesLen + '00%';

let slideWidth = (1 / slidesLen * 100) + '%';

let clickCount = 0;

let translateAmount = 0;

function updateAmount() {

translateAmount = clickCount * 1 / slidesLen * 100 + '%';

document.getElementById('slidesList').style.transform = 'translateX(' + translateAmount + ')';

}

window.nextSlide = function() {

if (Math.abs(clickCount) < slidesLen - 1) {

clickCount--;

} else {

clickCount = 0;

}

updateAmount();

}

window.prevSlide = function() {

if (clickCount < 0) {

clickCount++;

} else {

clickCount = 1 - slidesLen;

}

updateAmount();

}

let slidesHtml = '<ul id="slidesList" style="width: ' + slidesListWidth + '; transform: translateX(' + translateAmount + ')">';

for (let i = 0; i < slidesLen; i++) {

slidesHtml += '<li style="width: ' + slideWidth + '">' + '<img src="' + slides[i].image + '" alt="' + slides[i].text + '"><span class="text">' + slides[i].text + '</span></li>';

}

slidesHtml += '</ul>';

sliderControls.insertAdjacentHTML('afterend', slidesHtml);

})();

body {

margin: 0;

padding: 0;

}

#imageSlider {

margin: 0 auto;

max-width: 1200px;

position: relative;

overflow-x: hidden;

}

#imageSlider ul {

list-style-type: none;

margin: 0;

padding: 0;

transition: all 1.0s ease-in-out;

}

#imageSlider li {

display: block;

float: left;

position: relative;

}

#imageSlider img {

display: block;

width: 100%;

height: auto;

}

#imageSlider .text {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

text-align: justify;

line-height: 1.5;

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 15px;

color: #fff;

background: rgba(0, 0, 0, 0.15);

}

.controls span {

line-height: 1;

display: inline-block;

text-align: center;

width: 30px;

height: 32px;

line-height: 21px;

cursor: pointer;

color: #fff;

font-size: 54px;

position: absolute;

top: 50%;

margin-top: -18px;

z-index: 2;

opacity: 0;

transition: opacity 0.25s ease-in-out;

}

.controls span:last-child {

right: 0;

}

#imageSlider:hover .controls span {

opacity: .75;

}

<span onClick="prevSlide()">&lsaquo;</span>

<span onClick="nextSlide()">&rsaquo;</span>

</div>

注意：對于即時轉換，請替換transition: all 1.0s ease-in-out為transition: all 0s.

反對回復 2023-04-14

3 回答
0 關注
225 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 JavaScript 變量的值更新虛擬 html 元素的樣式屬性？

如何使用 JavaScript 變量的值更新虛擬 html 元素的樣式屬性？

3 回答

添加回答

如何使用 JavaScript 變量的值更新虛擬 html 元素的樣式屬性？

如何使用 JavaScript 變量的值更新虛擬 html 元素的樣式屬性？