<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">博客园</div>
<input type="button" value="变大" onclick="big()">
<input type="button" value="变色" onclick="color()"> <script>
function big() {
var ele=document.getElementById("div1"); // 先导航到要改的标签
ele.style.fontSize="80px";              // 用style.里的方法去改变属性参数
}
function color() {
var ele=document.getElementById("div1"); // 同上
ele.style.color="red";
} </script>
</body>
</html> ================================== 注: 如果是大公司共同开发代码时,css可能是美工完成的 直接改别人的代码方法不可取 ===================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.class1{
color: #48f444;
}
.big{
font-size: 90px;
color: #0000cc;
}
.small{
font-size: 30px;
color: red;
} </style>
</head>
<body>
<div id="div1" class="class1"> 博 客 园 !!</div>
<input type="button" value="变大" onclick="change('big')"> // 指定传的参数就是要添加的css的样式名
<input type="button" value="变小" onclick="change('small')">
<script>
function change(css) { // 因为功能一样 所以只用一个函数完成,使用参数
var ele=document.getElementById("div1"); // 通过ID找到标签
ele.classList.add(css) // 在标签的class list里用此方法添加 css
}
</script>
</body>
</html>
 
================================== 注:此方法是通过添加已有的未引用的样式表到标签中去 ==============================================  
												

用js语句控制css样式的更多相关文章

  1. jQuery控制CSS样式

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  3. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  4. js如何控制css伪元素内容(before,after)

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  5. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

  6. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  7. 3.通过js代码设置css样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 5、通过js代码设置css样式

    1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. 通过js获取外部css样式

    通过js获取外部样式表中的属性,比如.box在style.css样式表中有个属性叫font-size:16px; 通过js获取.box的这个属性: js代码为: <script> wind ...

随机推荐

  1. activeMq延迟消息队列

    Long delay = 30 * 1000L; jmsTemplate.send(type.getValue(),new MessageCreator() { @Override public Me ...

  2. SHELL编程之case与函数

    一.case语句概述 使用case语句改写if多分支可以使脚本结构更加清晰.层次分明 针对变量不同取值,执行不同的命令序列 case语句结构如下: case 变量值  in 模式1) 命令序列1 ;; ...

  3. Python获取网页Html文本

    Python爬虫基础 1.获取网页文本 通过urllib2包,根据url获取网页的html文本内容并返回 #coding:utf-8 import requests, json, time, re, ...

  4. python连接postgreSQL

    利用python(我用的是python2.7版本)连接postgresql数据库,这里使用psycopg2这个插件 官网下载psycopg2-2.5.1.tar.gz:http://initd.org ...

  5. JDBC_设计架构_驱动类加载_建立Connection_效率测试

    JDBC(Java DataBase Connection) 访问数据库流程:驱动管理器--连接数据库--sql语句--结果集 装载mysql驱动 Class.forName("com.jd ...

  6. 条目八《永不建立auto_ptr的容器》

    条目八<永不建立auto_ptr的容器> 重要的事说三次,永不建立auto_ptr的容器,永不建立auto_ptr的容器,永不建立auto_ptr的容器!!! 为什么? 实质是auto_p ...

  7. docker 安装 redis

    docker拉去镜像以及配置生成容器的步骤几乎和之前的nginx安装一样,直接写下面的命令了 1. docker pull redis 2. docker run -p 6379:6379 -v /U ...

  8. 本地安全策略命令行secedit设置本地账户安全策略

    我们日常运行的控制台程序secpol.msc里面的内容,实质可以通过命令行完成,下面演示通过secedit命令来设置本地账号密码策略,启用密码复杂性和强制长度至少8位操作办法. ==> 新建文本 ...

  9. springboot(一):入门

    什么是springboot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...

  10. v-show, v-if, 以及动态组件的区别

    vue提供了v-if, v-show来动态显示隐藏组件 同时也提供了<component>元素在一个挂载点上动态的切换组件, 通过 is 来决定哪个组件被渲染显示 配合<keep-a ...