<!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. 
						
  2. js中获取css样式属性值
		
    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
    
		
    3. 
						
  3. JS 控制CSS样式表
		
    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...
    
		
    4. 
						
  4. js如何控制css伪元素内容（before，after）
		
    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
    
		
    5. 
						
  5. js 设置 获取css样式
		
    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...
    
		
    6. 
						
  6. 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
		
    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
    
		
    7. 
						
  7. 3.通过js代码设置css样式
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    8. 
						
  8. 5、通过js代码设置css样式
		
    1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
    
		
    9. 
						
  9. 通过js获取外部css样式
		
    通过js获取外部样式表中的属性,比如.box在style.css样式表中有个属性叫font-size:16px; 通过js获取.box的这个属性: js代码为: <script> wind ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. .properties文件的使用
			
    在很多项目中我们都会使用到.properties文件对我们的项目进行配置,今天就介绍一下.properties文件在项目中的使用: 如下图,我们项目中有一个名为project.properties的p ...
    
			
    2. 
						
  2. 第二篇 Python运算符
			
    1.算术运算符 运算符 描述  +  两个值相加  -  两个值相减  *  两个值相乘  /  两个值相除  %  得到两个数相除的余数  **  x**y得到x的y次幂  //  返回两个数相除商 ...
    
			
    3. 
						
  3. newman的常用命令使用总结
			
    前提:为了运行newman,你要确保系统中安装的Node.js版本是大于v6的. 命令常用选项: newman [optiions] -h:显示命令行帮助,包括选项列表和简单的使用案例. -v:显示当 ...
    
			
    4. 
						
  4. 深入 Nginx：我们是如何为性能和规模做设计的
			
    NGINX 在网络应用中表现超群,在于其独特的设计.许多网络或应用服务器大都是基于线程或者进程的简单框架,NGINX突出的地方就在于其成熟的事件驱动框架,它能应对现代硬件上成千上万的并发连接. NGI ...
    
			
    5. 
						
  5. 【bzoj3930】选数 容斥原理+暴力
			
    Description 我们知道,从区间[L,H](L和H为整数)中选取N个整数,总共有(H-L+1)^N种方案.小z很好奇这样选出的数的最大公约数的规律,他决定对每种方案选出的N个整数都求一次最大公 ...
    
			
    6. 
						
  6. 【python】Python的logging模块封装
			
    #!/usr/local/python/bin # coding=utf-8 '''Implements a simple log library. This module is a simple e ...
    
			
    7. 
						
  7. 中国版Azure 文件服务
			
    中国版Azure 文件服务预览版在2015年1月13日已经上线,文件存储使用标准SMB 2.1协议为应用程序提供共享存储. 当我们的虚拟机连接到文件共享后就可以像使用本地共享文件夹一样来读取和写入文件 ...
    
			
    8. 
						
  8. PC站与H5移动站最佳适配方案
			
    HTML5是目前HTML的最屌版本,同时也是建设移动站的最佳技术.百度适时推出PC站与H5移动站的最佳适配方案,对站长而言实在是久旱逢甘霖.详情如下: PC站与H5移动站最佳适配方案 pc端: 在pc ...
    
			
    9. 
						
  9. JS 命名规范
			
    JS的命名规则和规范 规则 - 必须遵守的,不遵守会报错 由字母.数字.下划线.$符号组成,不能以数字开头 不能是关键字和保留字,例如:for.while. 区分大小写 规范 - 建议遵守的,不遵守不 ...
    
			
    10. 
						
  10. 创建React工程
			
    下载 main.jsBundle 包curl http://localhost:8081/index.ios.bundle -o main.jsbundle <!DOCTYPE html> ...
    
			
    11.