如何更改横幅的宽度答案

【问题标题】：How to change the Width of Banner如何更改横幅的宽度
【发布时间】：2012-11-30 09:51:00
【问题描述】：

我有一个宽度为 100% 的横幅。当我单击一个按钮时（可能使用 jQuery）会使横幅的宽度为 980 像素。

有人知道帮我解决这个问题吗？

我试过这段代码但没有用。：/

<script type="text/javascript">
$(document).ready( function() {
    $("#botao").click(function() {
        $f(.fullwidthbanner).css("width","100%");
        }).click(function() {
        $(.fullwidthbanner).css("width","980px");
    })
})
</script>

元素宽度在哪个类中。全宽横幅。 PS：它在样式表中。谢谢

【问题讨论】：

标签： jquery css width banner

【解决方案1】：

看起来你只是需要做一些代码格式化......你在正确的轨道上。

$(document).ready( function() {
    $("#botao").click(function() {
            $('.fullwidthbanner').css("width","980px");
    });
});

【讨论】：

最后缺少一些分号 :)

【解决方案2】：

<script>
$(document).ready(function() {
  $('#botao').click(function() {
     $('.fullwidthbanner').css('width', '980px');
  });
});
</script>

不要忘记 jQuery 选择器中的引号

【讨论】：

【解决方案3】：

<script type="text/javascript">
$(document).ready( function() {
  $("#botao").click(function() {
     $('.fullwidthbanner').css("width","980px");
  });
});
</script>

【讨论】：

$(.fullwidthbanner) 缺少引号！
我认为变量不能以特殊字符开头。

【解决方案4】：

您只需编写一个点击事件，就像这样：新版本最好使用.on而不是直接.click

DEMO

<script type="text/javascript">
$(document).ready( function() {
  $("#botao").on("click",function() {
     $(".fullwidthbanner").css("width","980px");
  });
});
</script>

【讨论】：

为什么 .on 比 .click 更好？
.on 是为了替代 .live 和 .bind 而创建的，我认为这是一种快速方法。它是一种速记方法。现在使用 .on 比使用 .click 并不重要，但我个人认为@ToniToniChopper 更好

【解决方案5】：

参考 jQuery 文档.width() & .height()

.width(值)

说明：设置匹配元素集中每个元素的 CSS 宽度。

.width(值)

值一个表示像素数的整数，或者一个整数加上一个可选的度量单位（作为一个字符串）。

(function() {
  var modWidth = 50;
  $("div").one('click', function () {
    $(this).width(modWidth).addClass("mod");
  modWidth -= 8;
  });
})();

.width(函数(索引,宽度))

function(index, width) 返回要设置的宽度的函数。接收集合中元素的索引位置和旧宽度作为参数。在函数中，this 指的是集合中的当前元素。

HERE A DEMO JSFidlle

【讨论】：