js实现addClass添加样式

JavaScript018

js实现addClass添加样式,第1张

今天和大家分享如何用原生js实现添加样式功能

jQuery里封装的有addClass函数,调用十分方便,那么用JS如何实现呢,下面我们来介绍下。

首先是CSS部分

写一个新的class用来添加

HTML部分

一个没有样式的div

script部分

声明addClass函数,把标签元素和新的class作为参数传进去,进行判断,如果标签元素原来有样式,那么就增加一个样式,如果没有样式,那么就把标签元素的样式设为传进来的样式。

调用函数,这样就实现了样式的添加。

更多前端内容 请 点击关注 点击关注

如下示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>Demo</title>

</head>

<style type="text/css">

a{text-decoration: none}

.class-name{border: 1px solid #CCCCCCbackground: #FFA54F-webkit-border-radius: 5px-moz-border-radius: 5pxkhtml-border-radius: 5pxborder-radius: 5pxpadding: 5px 10pxwidth: 100pxtext-align: center}

</style>

<body>

    <div id="main">

        <a href="javascript:" onclick="add_class()">添加Class</a>

    </div>

<script language="javascript" type="text/javascript">

    function add_class(){

        document.getElementById('main').className = 'class-name'

    }

</script>

</body>

</html>

测试效果如下:

添加class前

添加class后

与jQuery的addClass同一效果的。

1、代码:

Wv.getSettings().setLightTouchEnabled(true)

Wv.getSettings().setJavaScriptEnabled(true)

Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction")

public class JavaScriptInterface {

Context mContext

JavaScriptInterface(Context c) {

mContext = c

}

public void showToast(String webMessage){

final String msgeToast = webMessage

myHandler.post(new Runnable() {

@Override

public void run() {

// This gets executed on the UI thread so it can safely modify Views

myTextView.setText(msgeToast)

}

})

Toast.makeText(mContext, webMessage, Toast.LENGTH_SHORT).show()

}

}

2、js中调用

AndroidFunction.showToast(testVal)