javascript学习--段落字体的放大与缩小

注意:javascript中的CSS样式与非javascript中的样式不同,在非javascript中的样式字体大小:font-size,而在javascript中则是fontSize.

在非javascript中的样式中“-”改写为第二个字母大写

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title></title>

<style type="text/css">

.re {

background-color:gray;

font-weight:200;

padding:30px;

}

</style>

<script type="text/javascript">

window.onload = function () {

var btnBig = document.getElementById(‘big‘);

var btnLit = document.getElementById(‘litter‘);

var btnstyle = document.getElementById(‘btnStyle‘);

var p1 = document.getElementById(‘pnew‘);

var fz = 12;

//放大

btnBig.onclick = function () {

fz++;

p1.style.fontSize = fz+ "px";

}

//缩小

btnLit.onclick = function () {

if (fz > 0) {

fz--;

p1.style.fontSize = fz + "px";

}

else {

alert("不能再小了!");

}

}

//设置格式

btnstyle.onclick = function () {

p1.className = ‘re‘;

}

}

</script>

</head>

<body>

<input type="button" id="big" value="增大" />

<input type="button" id="litter" value="缩小" />

<input type="button" id="btnStyle" value="设置样式"/>

<p id="pnew">

他说,过去两至三周,警方以极度容忍的态度来处理示威人士的非法行为,

目的是希望有关人士能够冷静下来,

重新以和平理性和合法的方式来表达他们的诉求。非常遗憾,他们仍然依然故我,

甚至变本加厉。这些违法行为正在不断伤害香港,令到上学的不能正常上学,上班的不能正常上班,

做生意的不能正常做生意,生病的人不能正常复诊,各行各业受到非常严重的影响。

</p>

</body>

</html>

时间: 2024-12-06 00:05:11

javascript学习--段落字体的放大与缩小的相关文章

iOS字体的放大和缩小

1.- (void)viewDidLoad先设置字体的全局变量font=14;2. 自定义2个按钮并添加事件    //放大 _zoomInBtn = [UIButton buttonWithType:UIButtonTypeCustom]; _zoomInBtn.frame = CGRectMake(185, 7 , 30, 30); _zoomInBtn.backgroundColor = [UIColor clearColor]; [_zoomInBtn setImage:[UIImage

JavaScript特效之图片特效放大,缩小,旋转

效果图如下: 效果代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <m

javascript之点击按钮实现放大、缩小字体

<style> .bb{color:red;} .cc{color:green;} .chapter {font-size: 1.5em;} .normal{font-size:12px;} .hidden{display:none;} </style> <script> $(document).ready(function() { $('div.aa').addClass('bb'); $('a[href^="http:"]').addClass(

JavaScript 学习笔记(初学者)

Java Script 基础 一. JS的简介     JavaScript是一种网页编程技术,经常用于创建动态交互网页     JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法     事先不编译:逐行执行:无需进行严格的变量声明:内置大量现成对象,编写少量程序可以完成目标     不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样 二. JS的基本语法    0. 有两种JavaScript写法:       a. 直接在 h

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

js鼠标控制图片的特效,滚轮控制放大、缩小、鼠标拖动、聚焦。。。

项目需要做一个js控制图片的特效,滚轮控制放大.缩小.鼠标拖动等效果,网上找方法,各种报错.不兼容...最终自己研究出一套方案如下: 代码直接从项目中拷了,就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小,记录放大或缩小图片前的大小 var pic_size = { width:0, height:0 }; //绑定滚轮滚动事件 if (window.addEventListener) {

jQuery_review之textarea的放大和缩小的jQuery实现

众所周知,各种浏览器对于HTML.CSS以及原生JS的支持不尽相同.但是jQuery很好地封装了各种浏览器不同的实现,能够很好地解决跨浏览器的CSS问题.下面就是在review表单操作的时候的一个DEMO,记录在这个地方,方便后面做项目的时候查找使用,这个如果添加动画效果会更好,jQuery所有的动画效果都是可以通过animate函数来实现. <%@ page language="java" import="java.util.*" pageEncoding=

Javascript学习--------详解window窗口对象

对话框: 警告对话框:alert(): 语法:window.alert(src)或者alert(src); 询问回答对话框:confirm(): 语法:window.confrim(question)或者confrim(question); 单击确认,返回true: 单击取消,返回false 提示对话框:prompt(): 语法:window.prompt([showtxt],[defaultTxt])或者prompt([showtxt],[defaultTxt]); 单击确认,返回输入的文本:

JavaScript学习指南。

JavaScript - 客户端脚本语言 JavaScript是属于网络的脚本语言! JavaScript被数百万计的网页用来改进设计.验证表单.检测浏览器的一系列以及更多的应用. JavaScript学习简单. 什么是JavaScript,可以做什么 JavaScript为HTML设计师提供了一种编程工具 HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言!几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中. JavaScript