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

2023年11月30日 190次阅读

这是我的麻烦.

我正在使用一个灯箱插件.由于某种原因,其中一个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像素,在高度上添加55px.

我该怎么做呢？

我想说我不是在寻找答案;如果你能向我解释一下,那就太好了.非常感谢,伙计们！

编辑：这就是我调用JQuery的方式
    

此外,您可以在此处查看包含图库的页面：http://olsencustomhomes.com.previewdns.com/designs/verona-2/#gallery

编辑克里斯：

这是正确的代码吗？它在我的标题中

<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>

最佳答案 相当简单的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);

小提琴：http://jsfiddle.net/579s2/

点赞