实时改变样式的例子

最新推荐文章于 2021-08-04 10:05:22 发布
最新推荐文章于 2021-08-04 10:05:22 发布
阅读量1k 收藏
点赞数
分类专栏： Web开发 文章标签： javascript function table css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ceocio/article/details/16881
版权

1、利用CSS来改变的例子
<head>
<script>
function StyleChange(StyleName)
{ChangeStyle.className=StyleName;}
</script>
<style>
<!--
.style1  { FONT-FAMILY: Georgia; }
.style2  { FONT-FAMILY: 宋体; }
-->
</style>
</head>

<span οnclick=StyleChange("style1") style="cursor:hand">样式1</span>
<span οnclick=StyleChange("style2") style="cursor:hand">样式2</span>
<table>
<tr>
<td id=ChangeStyle>
1981年11月19日
</td>
</tr>
</table>

2、又一个实时改变样式的例子：
<script language=javascript>
function FontChange(fontsize)
{
 document.getElementById('fontchange').style.fontSize=fontsize+'px'
}
</script>

<a href="javascript:FontChange(48)">click here</a>

<span id="FontChange">1981年11月19日</span>

ceocio
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VANT标签栏样式改变
算法与编程之美
01-17 4137
1 问题描述在使用vant的Tab标签制作导航栏时，Tab样式书写方式同css有些许不同，并且一些样式变量是已经自定义的。那么如何改变样式呢？为此总结了一部分较为常用的样式的代码。2 算法...
网站设计中表单验证（ASP）
03-05 1465
网站设计中表单验证（ASP）作者：刘巍邮箱：support@ceocio.net网址：http://www.ceocio.net    一般的动态网站需要通过表单来收集用户信息，或者实现与用户的交互，虽然我们相信绝大多数人士既然选择了填写表单就会认真的完成，但是亦不能避免无聊人士乱填表单，况且即使一个正常用户在填写过程中也会无意识的出现一些填写错误，或者他们忘记了填某些选项。通常为了避免这
Vue.js动态改变样式
热门推荐
程麒阁的博客
07-27 2万+
动态改变样式 我们经常有这样的需求，就是用js控制css。但是我们知道js只能控制DOM层和BOM层，没有办法控制写入CSS文件。可是我们有时候偏偏需要改变样式怎么办呢？我们有两种方法： 动态改变style属性值 动态切换class类名 嗯嗯，没错。虽然我们不能用js直接操作css样式表，但是我们可以控制元素的样式属性嘛，class和style都是属性值，看起来有搞头呀，话不多说，开始了！！！ 控制style样式 1.使用样式对象 html代码 <div id="app"> <
vue改变样式
weixin_43919497的博客
04-29 1297
通过给html元素的class属性绑定vue中的属性值，得到样式的动态绑定。 传统的class=“样式”，通过v-bind:class="{样式:布尔值}"（布尔值=true显示反，false不显示），再通过将布尔值设置成vue中的属性值就可以实现动态绑定了。 例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U
jquery改变css样式表,jquery改变多个css样式
weixin_39816448的博客
08-04 2040
$(document).ready(function(){$("button").click(function(){$("p").css({"background-color":"yellow","font-size":"200%"});});});This is a headingThis is a paragraph.This is a paragraph.This is a paragrap...
鼠标移入移出改变CSS样式的小例子
01-21
网页上的某个区域，当鼠标移入时改变样式，鼠标移出时自动恢复样式，可以是一个图片的边框，也可以一段文字变色，掌握了原理，貌似可以做更加丰富生动的网页互动效果，这里主要是利用Js控制Hover标签所在的DIV产生...
vue2.0 根据状态值进行样式的改变展示方法
08-27
总结一下，Vue 2.0 中根据状态值改变样式的步骤包括： 1. 定义一个数据对象，包含状态值和对应的类名。 2. 使用 `:class` 绑定这个数据对象，根据状态值动态选择类名。 3. 在CSS中定义这些类名的样式。 4. 可选地，...
angularjs下ng-repeat点击元素改变样式的实现方法
10-18
总结起来，通过结合`ng-repeat`、`ng-class`以及适当的CSS和JavaScript逻辑，我们可以实现点击AngularJS中的元素并动态改变其样式的效果。这种方法在创建可交互的列表和网格视图时非常有用，能够提供良好的用户体验...
wpf 样式学习例子 样式 模板 触发器
09-26
通过深入学习和实践"StyleDemo"中的例子，你可以更好地理解如何利用WPF的样式、模板和触发器来创建动态、响应式的用户界面，提升应用的专业性和用户体验。同时，这也会为你在WPF开发中解决实际问题提供宝贵的参考。
Web标准？你需要吗？
09-03 1455
这篇文章纯粹是由CSDN的这个讨论而发起的：http://community.csdn.net/Expert/TopicView.asp?id=3265752在此帖中，我竭力游说大家放弃表格布局，而采用XHTML+CSS的方法。可是有很多人不理解，因为表格布局相当简单，前期开发相当快捷，大家乐此不疲。为了让大家更加体会到Web标准开发的好处，我特意将我的一个私活用XHTML+CSS来布
ASP+VML+DB实现投票统计项目。
06-19 1258
       几个月前我看到过一位网友lshdic写的一篇用JS+VML的《使用 Vml 制作立体柱状投票统计图的完整程序》。       我觉得这个方法非常不错，可以不使用图片就生成统计图，现在就让我们一起来用ASP实现这个程序。      准备工作：用ACCESS建立一个MDB数据库,名为vote.mdb，并且在数据库中建立如下两个表：然后建立我们按照ASP开发的惯例建立连接数据库的文件c
我用来在框架页面中构建URL的方法
11-14 1210
这是原来用在我的一个框架主页中的方法，因为在框架网页中我们的地址始终是第一个页面的地址，所以当页面真实内容改变后我们还是因为将这个内容页面的真实地址显示出来：function GetURL(){var i=parent.top.document.location.href;//判断URL是否包含?src=，如果有则不重新构造URLvar ii = i.indexOf("?src=");if (ii
使用ASP开发web站点
11-15 1148
作者：刘巍 网址http://www.ceocio.net E-Mail:support@ceocio.net 关键词：ASP开发web站点 时间：2002.8.6 说明：由于行文仓促及作者水平有限，难免有错，欢迎来信指正。 使用ASP开发web站点（前言) 一般的大型网站目前已经越来越少的使用ASP来架构，不过在中小型商务站点上，ASP依然占据了较大的市场范围。ASP以其简单，开发周期短，易维护
ASP实现最简单的加密。
03-06 1071
我在中国素材网的论坛看到网友问怎么简单加密，具体实现可以这样写： 用asp,Perl忘完了。 先写一个登陆表单。假设reg.asp 西路登陆页面 Username Password 进入 loginout 再来一个登陆验证 pass.asp Option Explicit Dim username, password username = Request.F
轻松打造ASP计数器。
03-06 1059
以下介绍用数据库实现简单计数器 下面存为count.asp Set conn=Server.CreateObject("ADODB.Connection") conn.Open "driver={Microsoft Access Driver (*.mdb)};dbq="& Server.MapPath("count.mdb") %> set rs=conn.execute(sql) %>
perl如何内嵌html。
02-11 1045
近日在CSDN的CGI版看到有centuries (燃烧太阳)网友问如何在Perl中内嵌HTML，这是在Perl WEB开发中经常遇到的一个问题，现在写出来，希望对大家有所帮助。问我现在有一个html的网页代码，要将其改为perl程序，如果只是单纯在其第一行加上"#!../perl/bin/perl",并将文件后缀名改为.cgi，会出现错误提示"You dont have
如何在页面显示来访者分辨率,浏览器(js)
03-06 938
最近有很多人问我这个问题,所以在这里把代码给大家:document.write(screen.width+"×"+screen.height);//-->document.write(navigator.appName);//-->document.write(window.screen.colorDepth);//-->
ASP打造出站点弹出广告
05-28 864
本文教您用ASP在5分钟内打造出站点弹出广告这里我们只给出核心代码，显示和后台添加是相当简单的，您完全可以自己搞定。首先你将以下代码插入到网站首页面的代码中sql = "select top 2 width,height,id from pop where useit=1 order by id"set rs=conn.execute(sql)if not rs.eof and not rs.bo
改变Bootstrap轮播图的样式的例子
最新发布
06-10
以下是一个例子，演示如何使用CSS样式改变Bootstrap轮播图的样式： HTML代码： ```html <!-- 轮播图指示器 --> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值