Javascript：改變x的值，而x是object.style.left;

這裏是我的情況：Javascript：改變x的值，而x是object.style.left;

我有一個CSS位置爲`「的div div：10px;」所有divs位置被設置爲固定。現在我把這個值放入一個變量（JS）：

var Left = document.getElementById("div").style.left;

現在我可以提醒它：alert(Left);，我得到一個盒子巫婆說，「10px的」這裏是它的小提琴：http://jsfiddle.net/L19rq2tk/2/

現在我想通過使用變量Left來改變位置的值。我想，來到我的腦海每一種可能性：通過下面的代碼更改位置工作

Left = "100px"; -->does not work 
Left = 100px; -->does not work 
Left = "100"; -->does not work 
Left = 100;  -->does not work

：

document.getElementById("div").style.left="100px";

會很高興，如果有人可以幫助我！

來源

2015-06-20 Daniel Schumann

通過賦值給變量留下什麼都不做。您需要將值分配給html元素。

使用

document.getElementById("div").style.left="100px";

左邊是一個變種，其僅保持先前值。

你還需要給

positon:relative

到您的DIV否則它不會移動，左，如果元素具有這是在你丟失了一些位置屬性只能應用於頂部和其他位置的CSS。

http://jsfiddle.net/L19rq2tk/

這裏是你更新的提琴;

來源

2015-06-20 19:06:21

left作品與position:absolute
Here is updated fiddle
更新

通過添加position天氣relative or absolute將做的工作。通過添加position:absoute可能對你的設計的副作用（如lonic在評論中提及）
DEMO

來源

2015-06-20 19:08:06 ozil

不，不對。您需要添加'position：relative'或'position：absolute'。不要只使用'position：absoute'，因爲它可能會對您的設計產生副作用。 – Ionic

@Ionic爲您提供的信息OP's不會詢問_Don't只是使用position：absoute，因爲它可能會對您的設計產生副作用。所以不要試圖結束智能 – ozil

那麼如果你建議錯誤的東西？ OP有他的答案，但這不太正確。如果我問如何節省我的數據庫空間，我也可以回答刪除所有行。這是正確的，我會再次擁有這個空間，但它有所有我的數據丟失的副作用。 :-P在設計中，「絕對」可能會有更糟的副作用。只需編輯你的文章是正確的，一切都很好。 – Ionic

看到這個fiddle。

您已指定100px，但您尚未添加position:relative或position:absolute。由於這個事實你沒有看到任何東西，但它被分配在後臺。

來源

2015-06-20 19:10:08 Ionic

注意：通過在你的小提琴中使用'var Left'與'object.style.left'，OP沒有將''100px''指定爲元素的左邊樣式。 –

沒有你的權利，它沒有被指定。它由下一行中的'object.style.left =「100px」'分配。它只是添加顯示如何分配繼續。而且使用object而不是總是使用'document ....'的時間會更短。 :-) – Ionic

您必須使用您在答案document.getElementById("div").style.left="100px";結尾提到的顯式形式。如果你正試圖避免每次查找元素，你應該能夠做這樣的事情：

var savedStyle = document.getElementById("div").style; 
savedStyle.left = '100px';

你不能設置他們的方式你嘗試，因爲Left存儲值的副本中的值它並沒有指向相同的價值。當您將Left設置爲新值時，您只會更改正在存儲的值，而不是object.style.left正在存儲的值。雖然可以讓多個變量指向相同的對象，但不能讓多個變量指向相同的值。我已經包含了一個演示片段，顯示了不同之處。

var x = 1; 
 
var y = x; 
 
document.write('x = ' + x + '<br>'); 
 
document.write('y = ' + y + '<br>'); 
 
document.write('Setting y to 2<br>'); 
 
y = 2; 
 
document.write('x is now = ' + x + '<br>'); 
 
document.write('y is now = ' + y + '<br>'); 
 

 
var xObj = { myValue: 3 }; 
 
var yObj = xObj; 
 
document.write('xObj.myValue = ' + xObj.myValue + '<br>'); 
 
document.write('yObj.myValue = ' + yObj.myValue + '<br>'); 
 
document.write('Setting yObj.myValue to 1<br>'); 
 
yObj.myValue = 1; 
 
document.write('xObj.myValue is now = ' + xObj.myValue + '<br>'); 
 
document.write('yObj.myValue is now = ' + yObj.myValue + '<br>');

來源

2015-06-20 19:15:00 rdubya

Javascript：改變x的值，而x是object.style.left;

回答

相關問題