利用js改变css里面的display

JavaScript05

利用js改变css里面的display,第1张

$("#div").css("display","none")//修改display属性为none

$("#div").css("display","block")//修改display属性为block

jquery的css()方法的用法:

1.只需要修改一个css时格式为

$(selector).css(name,value)

2.设置多个属性的格式为

$(selector).css({property:value, property:value, ...})

可以使用jQuery的css方法,css()需要传两个参数,第一个是css元素的名称,第二个为值,例如css("display",'none')

工具原料:编辑器、浏览器

1、使用css()方法来设置某一个元素的display属性,代码如下:

body>

<div id="div1">

test

</div>

<script>

$(function(){

$("#div1").css("display",'none')

})

</script>

</body>

2、以上代码中使用$("#div1")选择器选择到div元素,然后使用css方法来设置其display值为none将元素隐藏。

3、运行的代码如下:

没有运行js代码之前:

运行的之后:

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<script>标签,输入js代码:$('button').click(function () {$('#123').css('display', 'block')})。

3、浏览器运行index.html页面,此时点击btn按钮后,div的内容成功被显示了出来。