`
cs_man
  • 浏览: 58850 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用javascript动态设置对象的class的通用方法

JavaScriptHTML 
阅读更多 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 改变对象的样式class</title>
<style>
.c1{font-size:15px; color:blue; font-weight:bold}
.c2{font-size:18px; color:red; font-weight:bold; background-color:yellow;}
</style>
</head>
<script language="javascript">
function initClass()
{
var d=document.getElementById("d1");
d.className="c1";
}

function changeClass()
{
var d=document.getElementById("d1");
d.className="c2";
}

function setClass(obj_id,_class)
{
var obj=document.getElementById(obj_id);
obj.setAttribute("class",_class);// 此句可无
obj.setAttribute("className",_class);
}
</script>
<body>
<div id="d1">
我是中国人
</div>
<p><br>
<br>
<input type="button" value=" 改变class" name="c1" onclick="initClass()">
  
<input type="button" value=" 继续改变class" name="c1" onclick="changeClass()">
  
<input type="button" value=" 标准设置" name="c1" onclick="setClass('d1','c1')">
</p>

</body>
</html>
分享到：
| java获取图片长度和宽度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript面向对象编程指南.pdf

    JavaScript面向对象编程是指在JavaScript语言中使用面向对象的方法来编写程序。JavaScript是一种高级的、解释型的编程语言，它支持面向对象的编程范式，允许开发者创建对象、使用继承和多态等面向对象的特性。以下是...

    JavaScript的面向对象特性浅析与范例.pdf

    1. 对象Object：Object对象是JavaScript的基本对象，在任何其它JavaScript对象中都包含有Object对象，在所有其它对象中它的方法和属性都是可用的。Object对象的一个重要属性是prototype，prototype属性是用来返回...

    JavaScript动态设置div的样式的方法

    - 为了保持代码的可读性和可维护性，应当避免过度使用JavaScript直接操作样式属性，合理的做法是将通用样式定义在CSS文件中，仅在必要时通过JavaScript动态调整。 通过以上的知识点介绍，可以看出JavaScript在动态...

    javascript面向对象学习笔记

    JavaScript是一种基于原型和函数式编程的动态类型语言，面向对象编程是其核心概念之一。本文将深入探讨JavaScript中的面向对象编程，主要关注类、对象、以及实现继承的几种模式。 首先，我们来看对象的创建。在...

    JavaScript对象模型-执行模型

    ### JavaScript对象模型-执行模型详解 #### 一、基本数据类型 JavaScript作为一种广泛使用的脚本语言，在其设计之初便提供了一系列的基本数据类型，这些类型构成了JS语言的基础，并且是理解和运用JS的重要基石。 ...

    悟透JavaScript

    通过Object.prototype，我们可以访问到所有JavaScript对象的通用方法，如toString()和hasOwnProperty()。理解原型链有助于我们有效地利用继承，这是OOP中的另一个核心概念。JavaScript的继承主要是基于原型的，我们...

    JavaScript快速查询手册

    随着代码规模的扩大，JavaScript引入了模块化机制，如CommonJS（Node.js中使用）、AMD（RequireJS）、UMD（通用模块定义）和ES6的import/export语法。 **ES6及后续版本** ECMAScript（ES）是JavaScript的标准，新的...

    JavaScript高级与设计模式.zip

    2. **原型链（Prototype Inheritance）**：JavaScript使用原型链实现继承，对象可以继承其他对象的属性和方法。这使得代码重用成为可能，并且可以通过原型对象扩展对象的功能。 3. **函数作为一等公民（First-Class...

    《精通javascript+jQuery》书中实例

    6. **原型链**：JavaScript 使用原型链实现继承，每个对象都有一个原型对象，可以通过原型对象获取和修改属性。 7. **ES6 及以上版本的新特性**：包括箭头函数、Promise、模块化（import/export）、类（class）等，...

    javascript控件开发之继承关系

    每个JavaScript对象都有一个内部[[Prototype]]链接到另一个对象，这通常是其构造函数的prototype属性。通过这种方式，一个对象可以“继承”另一个对象的属性和方法。在控件开发中，我们通常会创建一个基础控件类，...

    java8 通用转echart方法

    在前端，只需要将这个字符串解析成JavaScript对象，并传递给ECharts的配置即可。 总结，Java 8中创建通用的ECharts数据转换方法主要是通过处理数据结构、使用JSON序列化库（如Jackson）来转换数据。这个过程包括...

    javascript中文参考手册2017 chm版

    这份"JavaScript中文参考手册2017 chm版"将为开发者提供全面的API参考，包括内置对象、全局函数、BOM（浏览器对象模型）和DOM操作方法，以及各种编程模式和最佳实践。无论你是初学者还是经验丰富的开发者，这都是一...

    通用的josn字符串转换为对象和对象转换为字符串的c#源码

    JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，被广泛用于Web应用程序之间的数据传输。C#作为.NET框架的一部分，提供了丰富的库来处理JSON序列化和反序列化，其中最常用的是 Newtonsoft.Json 库，...

    连续操作HTMLElement对象图文解决方法.docx

    - 当试图使用`Object.prototype.xxx`这样的通用方法时，可能不适用于HTMLElement对象，因为它们可能没有这些方法。需查阅文档确认哪些方法适用于特定的DOM对象。 通过以上方法，你可以有效地对HTMLElement对象进行...

    JavaScript中判断对象类型的几种方法总结

    constructor属性是每个JavaScript对象都拥有的属性，它引用了初始化该对象的构造函数。constructor属性常用于判断未知对象的类型，尤其是用于判断对象是否为数组类型。但需要注意的是，constructor属性并不是不可变...

    javascript流行实例总汇

    此外，ES6引入了类（class）的概念，让JavaScript的面向对象编程更加简洁易懂。 6. **数组方法**：JavaScript的数组对象提供了一系列高效的方法，如`map`，`filter`，`reduce`，`forEach`等，它们用于遍历数组、...

    javascript 完全手册

    4. **灵活性**：JavaScript支持多种编程范式（如面向对象、函数式编程），并具有丰富的API库，使得开发者可以根据需求灵活选择实现方式。 5. **开源社区支持**：JavaScript拥有庞大的开发者社区，有大量的开源库和...

    javascript 的基本上所有的常用类库

    Prototype还引入了类（Class）的概念，使得面向对象编程在JavaScript中变得更加容易。 3. **AngularJS**：AngularJS是由Google维护的一个用于构建单页应用的前端框架。它提供了数据绑定、依赖注入、模块化等功能，...

Magicbox
Global site tag (gtag.js) - Google Analytics