Question

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

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

我根本不懂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。

Answer 1

我强烈建议您在计划定期操作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>

Answer 2

由于您对使用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");
}

Javascript图像填充

2 个答案: