Javascript添加轉換爲嵌入式樣式

我有一個簡單的問題：如何通過JavaScript將轉換作爲嵌入式樣式添加？在過去的一個小時裏，我一直在努力解決這個問題，也一直在到處搜索，但沒有任何工作。這裏是我的代碼：Javascript添加轉換爲嵌入式樣式

HTML：

<ul id="slider"> 
    <li class="slide"></li> 
    <li class="slide"></li> 
    <li class="slide"></li> 
    <li class="slide"></li> 
</ul>

的JavaScript：

var windowWidth = $(window).width(); 
var centerDistance = windowWidth/2; 
var targets = $(".slide"); 
var inlineTransform = '"' + "translateZ(" + centerDistance + "px)" + '"'; 
for (var i = 0; i < targets.length; i++) { 
    targets[i].style.WebkitTransform = inlineTransform; 
    targets[i].style.msTransform = inlineTransform; 
    targets[i].style.transform = inlineTransform; 
}

據W3Schools的，沒有什麼是拼寫錯誤，所有的前綴是正確的：w3schools DOM style transform

的語法應也是正確的。如果我使用其他樣式，我不會收到任何錯誤消息，並且此代碼可以正常工作。

來源

2017-06-20 Jonas Kuss

您要添加引號的字符串的外部。你不需要這些。 –

「根據w3schools ...」不！壞！ W3Schools不是權威的文檔來源，並且與[W3C]（https://www.w3.org/）沒有任何關聯，這與完全不同。 W3Schools有[不準確和糟糕的文檔記錄]（http://www.w3fools.com/），以及欺騙性品牌，不應該信任。 –

你不需要額外的引號添加到字符串。一個字符串是一個字符串。引號僅僅用於代碼中的字符串文字，而你已經有了這些。

這裏是一個jQuery版本：

var centerDistance = $(window).width()/2; 
var t = "translateZ(" + centerDistance + "px)"; 
var style = { 
    WebkitTransform: t, 
    msTransform: t, 
    transform: t 
}; 
$(".slide").css(style);

來源

2017-06-20 21:09:26

工程就像一個魅力！謝謝！ –

Javascript添加轉換爲嵌入式樣式

回答

相關問題