原生JS获取及设置CSS样式-1.行内样式

JavaScript014

原生JS获取及设置CSS样式-1.行内样式,第1张

面试中，应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧，让我给大家总结一下~

HTML + 行内样式

JS

嘿嘿~

其实js很不好用的，一般都使用jquery来写，改变样式的话我会使用两种方法

使用jquery中的.css()函数改变样式，这中方法很好用，可以在触发事件的时候任意操作某个元素的样式。

自定义一个class名字，比如.yangshi{} ,在触发的事件里使用 .addclass()和.removeClass() 两个函数添加或者删除某一个class类。达到切换样式的目的，这种方法比较清晰有条理。下面给出我写的一段jquery 代码。 这个的意思是，.box元素的鼠标进入会添加一个class类yangshi，离开的时候会删除这个class类

<script>

$(function(){

    $(".box").mouseover(function(){

        $(this).addClass("yangshi")

    })

    $(".box").mouseout(function(){

        $(this).removeClass("yangshi")

    })

})   

</script>

用js获取表格元素,行元素tr或者列元素td,进行css样式设置即可

<table><tr><td></td></tr></table>

<script type="text/javascript" scr="jquery.js">

    

    $('tr').css('border','solid 1px purple')

    $('td').css('border-collapse','collapse')

    $('td').css('padding','10px')

</script>

//以上方法是jquery方式实现获得和样式修改

//其中css和attr中参数可变,一个参数时意为获取,两个参数为设置

//设置样式也可给元素添加属性用attr

//或者addClass都可以,添加class属性等