Question

这是我的代码：

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>


<style>
body {
    text-align: center;
    width: 100%;}

#container {
transform: rotate(30deg);
transform-origin: bottom center;
-ms-transform: rotate(30deg); /* IE 9 */
-ms-transform-origin: bottom center;
-webkit-transform: rotate 0deg; /* Safari and Chrome */
-webkit-transform-origin:bottom center;
border: 1px solid black;
width: 152px;
margin: 40px auto;
height: 244px;
overflow: visible;
}
</style>

<script>      
var meteo = (function () {
    var meteo = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "http://api.openweathermap.org/data/2.5/weather?q=Leicester&units=metric",
        'dataType': "json",
        'success': function (data) {
            meteo = data;
        }
    });
    return meteo;
})(); 

var vento_forza = meteo.wind.speed;
var vento_direzione = meteo.wind.deg+"deg";    
</script>
</head>

<body>
<div id="container">
    <svg version="1.1" id="indicator" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="152px" height="244px" viewBox="0 0 152 244" enable-background="new 0 0 152 244" xml:space="preserve">
    <polygon fill="#84FFFB" points="0,244 76,207 152,244 "/>
    <polygon fill="#D6F4FF" points="76,0 76,207 152,244 "/>
    <polygon fill="#00A5EC" points="76,0 76,207 0,244 "/>
</svg>
</div>

<script>

function direzione(){
    document.getElementById("container").style.webkitTransform = "rotate(vento_direzione)"
}
</script>
<input type="button" onclick="direzione()" value="Change link">
</body>
</html>

基本上我希望容器div的旋转相应于var vento_direzione（它是从api请求获得的数字，我已经附加了一个“deg”字符串），每当我点击按钮时;可悲的是，这似乎并没有发生。如果我只是在函数内部传递一个值而不是var，那么一切正常。我做错了什么？

请帮忙！干杯！

Answer 1

你想要

document.getElementById("container").style.webkitTransform = "rotate("+vento_direzione+")";

因为它只是试图将文字字符串“rotate（vento_direzione）”传递给它，所以当它们在这样的字符串中时，变量不会被它们的值替换。

所以你需要做的是将实际的字符串部分“rotate（”和“）”与vento_direzione变量连接起来："rotate("+vento_direzione+")"是字符串连接

Javascript var无法在-webkit-transform中工作

1 个答案: