在Javascript中設置圖片的邊距

下面的代碼調整img的邊距，因此它以寬度爲600px的div爲中心。它一般工作，但有時它不會，需要第二個電話。在Javascript中設置圖片的邊距

編輯：忘了提及：這個功能是由另一個人觸發的，他將圖像源設置爲另一個，因此改變圖像。

任何幫助？

function adjustMargin(imageId) { 
var image = document.getElementById(imageId); 
image.setAttribute("style", "margin: 0 " + (300 - image.clientWidth/2).toString() + "px"); 
}

不太好的工作示例可以看到here。

來源

2012-11-12 muma

你能否提供一個它不起作用的例子？ –

你爲什麼要這樣做？ Surly有一個純粹的Css解決方案呢？ – Liam

使用CSS：

#imgId { 
    margin: 0 auto; 
    display: block; 
    // you are subtracting 300px and dividing by 2 
    // so assume your image is 300px wide 
    width: 300px; 
}

img標籤是內嵌元素和margin: 0 auto只會在塊工作，你必須包括在IMG CSS display: block元素。

另一種居中直列內容是：

#imgId { 
    text-align: center; 
}

兩種方法here

來源

2012-11-12 11:23:15 Bruno

我已經試過了：它不工作。保證金似乎保持不變。 – muma

@muma比你應該爲你的問題顯示一個相關的CSS/HTML。可能在http://jsfiddle.net上，這樣每個人都可以在行動中看到它。 –

確保你沒有漂浮你的圖像，並且它在塊級元素內 – Bruno

首先演示 - 用於設置樣式正確的方法是：

image.style.margin = "margin: 0 " + (300 - image.clientWidth/2).toString() + "px";

（好吧，也許沒有區別，但 propery應該用於改變元素的風格w ith JS）

第二 - 你確定圖像已經加載，當代碼執行？如果沒有 - image.clientWidth可能尚未提供。當圖像被加載時，您可能需要使用onload事件來運行該代碼。

第三 - 如Bruno's答案中所述，margin:0 auto;會自動將圖片放置在div的中間，所以根本不需要JS。

編輯：

但隨着第三方法你有問題，因爲圖像不是塊元素。爲了使工作做這樣的事情：

<div style=" 
    width: 600px; 
"><img src="Bilder/re-tabouret/[email protected]" alt="mainArticleImg" class="projektMainImg" id="01:00" style=""></div>

包裝圖像轉換成格與指定的寬度和更新的CSS是這樣的：

img.projektMainImg { 
margin: 0 auto; 
max-width: 600px; 
max-height: 400px; 
display: block; 
}

（見display:block加）或只是一個包裝形象分度指定寬度和添加text-align:center其樣式（沒有顯示塊和頁邊距需要）：需要在

<div style=" 
    width: 600px; 
    text-align: center; 
"><img src="Bilder/re-tabouret/[email protected]" alt="mainArticleImg" class="projektMainImg" id="01:00" style=""></div>

Wraper格或以將圖像居中在左側600px區域。否則它會相對居中<div class="projektImages">

來源

2012-11-12 11:27:17

爲什麼要用雙邊距？ would not image.style.margin =「0 auto」;足夠了？ – muma

@muma看到我更新的答案 –

謝謝，布魯諾已經提到它。我的錯。這些更改已經實施，但不在線。顯示：block;！另一個被遺忘的事物... – muma

在Javascript中設置圖片的邊距

回答

相關問題