0

我正在尝试创建一个 Tumblr 主题，但是如果我的图像宽度不等于 500 像素并且它在下方，我总是会遇到此错误，文本将在页面右侧运行，而不是在下方。

我想知道是否有人知道如何创建一个脚本来获取图像 id 中图像的宽度值，并在左侧和右侧窗格上创建一个等于 500 像素的填充

我根本不懂 javascript，所以我只想快速了解一下并简要介绍一下我期望发生的事情

<script type="text/javascript">
document.onload
var a = document.getElementbyId('photo')
if a < 500 function d() ({
a = obtain image width
var c = (500 - (var a))/2
function e()(
{style.padding-right: (var c); style.padding-left: (var c);});
)};
</script>

我显然没有 Javascript 知识，所以请原谅我写了一段 mumbojumbo 的简短摘录，但我只是想更清楚地了解如何做到这一点

我可以使用 jQuery。

4

2 回答 2

2

当您计划定期操作 html 元素时，我强烈建议您使用 jQuery。这是一个使用 jQuery 的示例。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() {
        var $photo = $('#photo');
        var width = $photo.width();
        if (width < 500) {
            var padding = (500 - width)/2;
            $photo.css("padding-right", padding);
            $photo.css("padding-left", padding);
        }
    });
</script>
于 2013-10-26T18:39:58.123 回答
1

由于您愿意使用 jQuery，因此以下代码应该让您非常接近：

// Get the width of the photo
var width = jQuery('#photo').width();
// Only add padding if less than 500 wide
if (width < 500) {
    // Padding left / right should be half the difference
    var padding = (500 - width) / 2;
    // Apply padding to the photo
    jQuery('#photo').css("padding", "0 " + padding + "px");
}
于 2013-10-26T18:39:53.457 回答