JavaScript style 样式

1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为JavaScript style 样式。

2、我们就先设置一个div，然后style样式设置div的样式属性。图二就是我们设置好的这个div的样式

3、接下来我们运用script这个标签来设置js的内容，也就是要运用js改变我们用style设置的样式。

4、我们要设置哪个内容就要先获取到哪个元素，正如这个我们要获取到那个div，我们就要通过获取div的id名来获取到这个div元素。

5、然后就要设置box的点击事件。这里不止可以设置点击事件还有鼠标移入事件，鼠标移出事件等等。这里我们用到的就是点击事件。当然也可以设置移入移出事件。

6、我们可以先改变box的宽度，300+“px”看到这里肯定会有人问为什么中间要用个加号，为什么px要用引号300就没有引号，这是因为300是数字，px是单位，他们两个属于字符串，所以px要用引号，并且他们两个中间用加号连接起来。图二是点击box后的效果，明显宽度增加了。

7、运用同样的方法我们来设置一下box的高度，图二是宽高都改变的效果。

8、我们也可以改变box的背景颜色，图二是改变了宽、高、背景颜色的效果。

9、其实我们还可以改变很多很多css样式这里就不一一展示了，只需要改变style后面的就行了。

10、这样一个JavaScript style 样式就做好啦！

JavaScript style 样式相关推荐

JavaScript正则表达式给html字符串的img标签增加style样式
平时我们使用正则表达式更多的是提取.过滤等,比如提取html字符串中的图片呀等等,而最近遇到的一个问题是要给html字符串中的img标签增加style样式,就想到了使用正则表达式,主要是对正则表达式的 ...
js改变style样式和css样式
js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: [html] view plaincopy < ...
007_Vue style样式绑定
1. style样式绑定处理 1.1. 对象语法 <div v-bind:style="{width: '400px', height: '50px'}"></d ...
JS获取DIV动态高度，并赋值到其style样式中
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
JavaScript设置样式
JavaScript设置样式通过JavaScript设置样式 <body><div id="box"></div></body>& ...
JavaScript的样式操作
JavaScript的样式操作样式操作获取内联样式 getAttribute()方法 DOM对象的style属性 CSSStyleDeclaration对象获取外联样式表 Document对象的 ...
Openlayers Style 样式演示
Openlayers style样式演示 OpenLayers 教程 Openlayers style样式演示在线示例 OpenLayers 教程 Openlayers 对样式的控制是通过一个通用的 ...
23.Vue绑定style样式
目录 1.style样式对象写法 2.style样式数组写法 3.总结 22.Vue绑定class样式_爱米酱的博客-CSDN博客为了讲好class样式,我们这里提前准备了7个样式作为例子来讲解. b ...
几个比较冷门的prototype扩展方法：去掉html标签、去掉a标签、去掉style样式，以及判断是否为html代码的代码片段
/*去掉html标签(真正意义上去掉所有html标签包括内嵌的css样式)*/ String.prototype.stripHTML = function (isRemoveNewLine) {var ...

JavaScript style 样式

JavaScript style 样式相关推荐

最新文章

热门文章