Question

我想使用jQuery删除overflow-x和overflow-y。我尝试了几种方法，但它们似乎不起作用：

这是我的代码：

body #s4-workspace {
  left: 0;
  overflow-x: auto;
  overflow-y: scroll;
  position: relative;
}

<div class="" id="s4-workspace" style="height: 463px; width: 1280px;">other tags</div>

以下是我尝试过的方法：

1）

$('body #s4-workspace').css('overflow-x','');
$('body #s4-workspace').css('overflow-y','');

2）

$('body #s4-workspace').removeProp('overflow-x');
$('body #s4-workspace').removeProp('overflow-y');

如果我在任何一种方法后输出overflow属性，我认为它们的值没有变化请参阅下面的演示：

$(document).ready(function() {
  try {
    $('body #s4-workspace').css('overflow-x', '');
    $('body #s4-workspace').css('overflow-y', '');

    $('body #s4-workspace').removeProp('overflow-x');
    $('body #s4-workspace').removeProp('overflow-y');

    alert($('body #s4-workspace').css('overflow-x'));
  } catch (e) {
    alert(e);
  }
});

 body #s4-workspace {
   left: 0;
   overflow-x: auto;
   overflow-y: scroll;
   position: relative;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s4-workspace" style="height: 463px; width: 1280px;">other tags</div>

http://haxe.org/download/

如何使用jQuery删除overflow？

Answer 1

您只需将它们设置为默认值 - visible：

$('body #s4-workspace').css('overflow-x','visible');
$('body #s4-workspace').css('overflow-y','visible');

Answer 2

说明

根据jQuery＆＃39; css() documentation：

将样式属性的值设置为空字符串...不会...删除在样式表或元素中使用CSS规则应用的样式。

我已经证明了以下问题 - 请注意overflow值没有变化：

＆＃13;

$(function() {

  var $workspace = $('#s4-workspace'),
    $output = $('#outout');

  $('div#output').html("<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>");

  $workspace.css('overflow-x', '');
  $('div#output').html($('div#output').html() + "<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>");

});

＆＃13;

#s4-workspace {
  overflow-x: auto;
}
#output span {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s4-workspace">other tags</div>
<div id="output"></div>

＆＃13;

但是，空字符串将重置overflow为默认值，如果它已由jQuery设置：

＆＃13;

$(function() {

  var $workspace = $('#s4-workspace'),
    $output = $('#outout');

  $workspace.css('overflow-x', 'auto');
  $('div#output').html("<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>");

  $workspace.css('overflow-x', '');
  $('div#output').html($('div#output').html() + "<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>");

});

＆＃13;

#output span {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s4-workspace">other tags</div>
<div id="output"></div>

＆＃13;

解决方案

明确设置overflow值的解决方案是offered by ahoffner。
另一个想法是通过CSS类应用overflow。然后你可以用jQuery＆＃39; removeClass()删除它，而不是直接操作样式：

＆＃13;

$(function () {

    var $workspace = $('#s4-workspace'),
        $output = $('#output');

    $output.html("<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>");
    $workspace.removeClass('horizontal_scroll');
    $output.html($output.html() + "<span>New overflow value: " + $workspace.css('overflow-x') + "</span>");

});

＆＃13;

#s4-workspace {
     left: 0;
     position: relative;
 }
 .horizontal_scroll {
     overflow-x:auto;
 }
 #output span {
     display:block;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s4-workspace" class="horizontal_scroll">other tags</div>
<div id="output"></div>

＆＃13;

顺便提及：

警告：一个值得注意的例外是，对于IE 8及更低版本，删除边框或背景等速记属性将完全从元素中删除该样式，无论样式表或元素中设置了什么。

使用jQuery删除overflow-x和overflow-y

2 个答案:

说明

解决方案