如何从js禁用特定的css元素?

时间:2017-04-04 21:16:21

标签: javascript html css cordova

所以我有一个带有滚动条的html表(它是一个长表)和一个搜索栏。实际上这个表太长了以至于我不希望用户能够向下滚动直到他们输入了几个字母在搜索栏中,表格已缩短。这是css:

.table{
display: block;
height: 100px;
 overflow-y: scroll;
overflow-x: hidden; 
}

如何禁用" overflow-y:scroll"在代码?

4 个答案:

答案 0 :(得分:1)

使用javascript

document.getElementById("element_id").style.overflow = 'hidden';

禁用此处的滚动事件

How to disable scrolling temporarily?

使用jquery

$(".table").css("overflow-y", "none");

答案 1 :(得分:0)

一种方法是使用jQuery。

if($('#div').html().length >0)
     $('.table').css('overflow-y','scroll');
else
     $('.table').css('overflow-y','hidden');

答案 2 :(得分:0)

如果您需要切换getComputedStyle(),可以使用overflow-y检查style的值。否则直接使用var target = document.querySelector( 'div' ); var btn = document.querySelector( 'button' ); btn.addEventListener( 'click', function ( e ) { var overflowY = getComputedStyle( target ).overflowY; target.style.overflowY = 'scroll' === overflowY ? 'initial' : 'scroll'; } );属性设置它。

div {
  height: 150px;
  overflow-y: scroll;
}
<button>Change Overflow Y</button>

<div>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>
  
</div>
auto

您也可以在上面的代码中使用scroll代替array_

答案 3 :(得分:0)

如果您无法触摸CSS并需要使用javascript:

1 ciphertext, ArraySegment

希望有所帮助