使用Javascript向现有CSS元素添加像素

这是我的麻烦

我正在使用一个灯箱插件。出于某种原因，其中一个div太短了28px。我已经到处寻找解决办法，但似乎没有人有同样的问题

我提出的解决方案是找到那个元素（我已经找到了），并创建一个javascript代码段，将“28”添加到现有的数字中。高度和宽度直接在div上计算，而不是在样式表的元素中计算

例如：

<div id="colorbox" class="" style="padding-bottom: 57px; padding-right: 28px; position: absolute; width: 892px; height: 602px; top: 2234px; left: 500px;">

我希望Javascript代码将宽度增加28像素，高度增加55像素

我该怎么做呢

我想说的是，我不是在寻找答案；如果你能解释给我听，那就太好了。非常感谢，伙计们

编辑：这就是我如何调用JQuery的

此外，您还可以在此处查看带有图库的页面：

为克里斯编辑：

这是正确的密码吗？在我的头上

<script>



 $(document).ready(function() {
        function changeSize(){
          var colorbox   = $("#colorbox");
          var initWidth  = $("#colorbox").outerWidth();  // get colorbox width
          var initHeight = $("#colorbox").outerHeight(); // get colorbox height


          var newWidth   = 28; // set your desired width
          var newHeight  = 55; // set your desired height
          var height     = initHeight + newHeight; // add heights together
          var width      = initWidth + newWidth;   // add widths together


          colorbox.css({"height" : height, "width": width});

      }

      $(document).ajaxStop(function() {
         changeSize();
      });
  });

</script>

$（文档）.ready（函数（）{
函数changeSize（）{
var colorbox=$（“#colorbox”）；
var initWidth=$（“#colorbox”）.outerWidth（）；//获取colorbox宽度
var initHeight=$（“#colorbox”）.outerHeight（）；//获取colorbox高度
var newWidth=28；//设置所需的宽度
var newHeight=55；//设置所需的高度
var height=initHeight+newHeight；//将高度相加
var width=initWidth+newWidth；//一起添加宽度
css（{“height”：height，“width”：width}）；
}
$（文档）.ajaxStop（函数（）{
changeSize（）；
});
});

如果要动态添加高度和宽度。像这样的方法应该会奏效：

function changeSize(){
    var colorbox   = $("#colorbox");
    var initWidth  = $("#colorbox").outerWidth();  // get colorbox width
    var initHeight = $("#colorbox").outerHeight(); // get colorbox height


    var newWidth   = 28; // set your desired width
    var newHeight  = 55; // set your desired height
    var height     = initHeight + newHeight; // add heights together
    var width      = initWidth + newWidth;   // add widths together


    colorbox.css({"height" : height, "width": width});

}changeSize();

此外，如果您想确保您的代码在配色箱打开后发生，您可以使用

.ajaxStop（）

；还要注意，

outerwidt（）

和

outerHeight（）

将获得颜色框宽度加上填充和边框

在ajax事件完成后触发函数：

$(".selector").colorbox({
    onComplete:function(){
      changeSize();
    }
});

   jQuery(function($){
        $('#wpsimplegallery a').colorbox({
            maxWidth: '85%',
            maxHeight: '85%',
            onComplete:function(){
                changeSize();
            }
        });
    });

更新：

$(".selector").colorbox({
    onComplete:function(){
      changeSize();
    }
});

   jQuery(function($){
        $('#wpsimplegallery a').colorbox({
            maxWidth: '85%',
            maxHeight: '85%',
            onComplete:function(){
                changeSize();
            }
        });
    });

好的，看起来函数开始启动了。您可以看到宽度为null，因为颜色框尚未打开。您要做的是在colorbox打开后启动函数。这就是

ajaxStop（）

发挥作用的地方。但实际上，最好使用：

但在配色箱打开后就不会了。因此，请尝试执行

ajaxStop（）

方法。另外请注意，如果执行此操作，则需要删除

changeSize（）在函数
changeSize（）之后，例如：

$(document).ready(function() {
    function changeSize(){
      // function stuff
    }

    $(document).ajaxStop(function() {
      changeSize();
    });
});

或，完成后的颜色框：

$(".selector").colorbox({
    onComplete:function(){
      changeSize();
    }
});

   jQuery(function($){
        $('#wpsimplegallery a').colorbox({
            maxWidth: '85%',
            maxHeight: '85%',
            onComplete:function(){
                changeSize();
            }
        });
    });

更新2:

$(".selector").colorbox({
    onComplete:function(){
      changeSize();
    }
});

   jQuery(function($){
        $('#wpsimplegallery a').colorbox({
            maxWidth: '85%',
            maxHeight: '85%',
            onComplete:function(){
                changeSize();
            }
        });
    });

我不确定您到底在哪里调用colorbox。但我看到你有这个：

试试看：

$(".selector").colorbox({
    onComplete:function(){
      changeSize();
    }
});

   jQuery(function($){
        $('#wpsimplegallery a').colorbox({
            maxWidth: '85%',
            maxHeight: '85%',
            onComplete:function(){
                changeSize();
            }
        });
    });

jQuery的应用非常简单，但我还是为您评论了它：

//select the box element using jQuery
var box = $('#colorbox');

//get the current width and height
var curWidth = box.width();
var curHeight = box.height();

//set the width and height with modified values
box.width(curWidth + 28);
box.height(curHeight + 55);

fiddle:
增加div的
填充底部可以解决您的问题吗？
$（“.selector”）
应该是您的选择器。我不知道在你的代码中你把colorbox叫做什么。。但是回调应该被添加到那里，并且您有两次函数
changeSize（）
。。嵌套在其内部。老实说，我不知道colorbox在哪里被调用。我正在添加一个名为“WP Simple Galleries”的wordpress插件。澄清一下：我没有改变插件代码。我只是把这个添加到我的标题中。我已经更新了我的答案。迈克，这个脚本看起来可以工作（当然在小提琴中也可以），但在我的网站上不起作用。我确实正确地调用了jquery，对吗？（请参阅编辑后的原始帖子了解更多细节）这个解决方案很简单，但由于某些原因，它不适合我。请参考我在原始帖子中的编辑，查看问题发生的位置。确保
changeSize（）
函数位于
$（文档）.ready（）函数中。另外，如果你点击f12，你可以在开发工具中设置一个断点来检查函数是否正在执行。另外，非常感谢你在这方面帮助我！我准备把头发拔出来了！这需要我更改插件代码。有什么办法吗？