用js去操作HTML元素和CSS样式

最新推荐文章于 2024-05-12 10:57:12 发布
最新推荐文章于 2024-05-12 10:57:12 发布
阅读量1.3k 收藏 2
点赞数 3
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CCC65A8780D2C/article/details/79913376
版权 
<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热身</title>
</head>
<body>
<div id="p1">我是第一段文字</div>
<p id="p2">我是第二段文字</p>
<script type="text/javascript">
document.write("hellow");
document.write("你好，要坚持下去学习");
document.getElementById("p2").style.color= "red";
document.getElementById("p1").innerHTML ="aaaa";
</script>
 </br></br></br>   
虽然每行分号";"也可以不写，但我们要养成编程的好习惯，记得在语句末尾写
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>

<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
   mychar.innerHTML ="修改后我要学习javascript";
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
	mychar.style.color="red"
    mychar.style.backgroundColor="blue";
	mychar.style.width="200px";
   	mychar.style.height="200px";
//	mychar.style.display="none";        //隐藏con
//  mychar.remove(con);               // 同样可以隐藏con        
  
  </script>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
		{  
		var mychar = document.getElementById("con").style.display ="none";
        
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con").style.display ="block";
        
		}
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" οnclick="hidetext()" value="隐藏内容" /> 
       <input type="button" οnclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" οnclick="add()"/>
	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" οnclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className="one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	       p2.className="two";
	   }
	</script>
</body>
</html>

CCC65A8780D2C
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript操作HTML元素和样式的方法详解
12-28
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。  实例 <p id=p1>This is a paragraph. <p id=p2>This...
js 给html 添加 样式吗,js怎么添加css样式？
weixin_39848007的博客
06-17 1258
在开发网页时，有时不想通过CSS源文件来添加网页元素的CSS样式代码，这时，我们可以通过JS来添加这些元素的CSS样式。那么怎样通过JS来为网页元素添加CSS样式呢？js怎么添加css样式？下面举一个简单案例：方法一：var head= document.getElementById("box"); //获取到id为box的div标签元素。head.style.width = "70px"; //...
如何在控制台修改html样式,js如何添加css3样式
weixin_39603537的博客
06-03 1423
js如何添加css3样式这里只介绍比较好用的方法，使用起来比较麻烦的方式不再介绍。1、直接在元素style上添加属性element.style.boxShadow = "0 4px 4px red";2、更改cssText的值element.style.cssText = "box-shadow: 0 4px 4px red";3、调用setProperty方法添加css(相关课程推荐：JS视频教...
用js改变html的属性
最新发布
weixin_72636650的博客
05-12 272
元素.innerHTML = 内容 改变元素的内容（包括内部标签）可识别标签。元素.属性 = 属性值 改变html元素的属性值。元素.style.样式 = 样式值 改变html元素的样式。用js改变html属性。
js,css,html加载顺序(DOM执行）
mocas_wang的博客
08-29 8162
目录 1 DOM概念 1.1 什么是DOM 1.2 DOM节点 1.3 DOM树 2.js ,css,html执行顺序 2.1 正常网页加载的顺序: 2.2 HTML 加载顺序 2.3 JS加载示例 1 DOM概念 1.1 什么是DOM 首先，什么是DOM？DOM是Document Object Model（文档对象模型）的缩写，是专门操作HTML的API。众所周知，DOM包含核心DOM、XML DOM和HTML DOM，核心DOM能够直接操作所有的结构化文档（html，xml），是中
js如何添加css
fury的博客
05-29 5203
【代码】js如何添加css。
使用js操作css
weixin_67235801的博客
03-04 3524
JavaScript如何操作css
js css样式操作代码（批量操作）
12-01
本文将详细介绍两种主要的JavaScript操作CSS样式的常见方法，并着重讲解如何进行批量操作，以提高代码效率和页面性能。 首先，我们来看最基础的样式设置方式。在JavaScript中，可以通过`style`属性直接访问到一个...
JQuery操作元素的css样式
01-19
我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元 素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能...
JavaScript改变HTML元素的样式改变CSS及元素属性
10-26
改变CSS及元素属性的方法有很多，在本文将为大家介绍下使用js是如何做到的，感兴趣的朋友可以感受下
JavaScript修改css样式style动态改变元素样式
12-01
一、局部改变样式 分为改变直接样式，改变className和改变cssText三种。需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法...
JS添加/修改CSS样式
第一段代码的博客
12-28 1万+
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的，记得是等号赋值。 document.getElementById("xx").style.xxx=xxxxx; 对应的属性方法如下表：（js语法存在和css语法中style设置有些区别和转换） 盒子标签和属性对比 CSS语法（不区分大写和小写） JavaScript语法（区分大写和小写） border border border-bottom borderBottom border-bottom-c
JS设置CSS样式的几种方式
xx_xiaoxinxiansen的博客
06-27 1863
JS设置CSS样式的几种方式 用JS来动态设置CSS样式，常见的有以下几种   1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号，就写成驼峰的形式（如textAlign）  如果想保留 - 号，就中括号的形式  element.style['text-align'] = '100px'; element.style.
使用JavaScript动态添加CSS样式规则
热门推荐
铁锚的CSDN博客
09-05 3万+
动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。
原生JS设置CSS样式有多少方式
小天才程序员的博客乐园
06-21 4161
element.style 和 element.style.cssText有什么区别 原生 JS 调整样式方式有 3 种。 element.style 使用驼峰形式 !important 权重无效 document.getElementById("box").backgroundColor = "red" // !important 无作用，下面两句是等效的 document.getElementById("box").style.color = "red !important" document
JavaScript 如何使用JS操作CSS
m0_65725031的博客
03-04 1万+
家人们，新的一天新的知识点，我们要开启新的课程啦，今天带大家学习如何使用JS操作css，大家有不懂得可以私信我，或者在下方评论噢，现在就让我带你们进入知识的海洋中。 一.什么是css？ Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表） CSS用于控制网页的外观(HTML是用于控制网页结构的,JS是控制网页的行为) Css让界面变得更加美观 二.如何使用JS操作CSS 1.直接操作style...
JS修改css样式的8种方式
奔跑的面条博客
04-12 1万+
从其他人的博客上看到的，感觉归纳的很棒，在这里种个草。 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style[‘text-align’] = ‘100px’; element.style.height = '100px'; 直接设置属性...
用JS来动态设置CSS样式的常见8种方式。
xiaoweids的博客
06-24 8236
转自：微点阅读 https://www.weidianyuedu.com用JS来动态设置CSS样式，常见的有以下几种1. 直接设置style的属性 某些情况用这个设置 !important值无效如果属性有"-"号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style["text-align"] = "100px";element.style.height = "100px";2. 直接设置属性（只能用于某些属性，相关样式会自动识别）element.
js动态添加css
pnuts的专栏
02-11 7111
为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。IE下，我们可以使用 document.createStyleSheet() 方法；而在非IE浏览器上，就不支持这个方法。可以使用document.styleSheets[0]，但要求网页里必须最少已经加载过一个样式表。后来我找到以下方法，可以在Firefox、Opera下正常运行：var str_cs
强化DOM基础知识，学习如何在JavaScript 中操作HTML元素和 CSS样式心得
06-02
操作 HTML 元素和 CSS 样式是 JavaScript 中重要的 DOM 操作。以下是一些心得： 1. 获取元素：可以使用 `document.getElementById()`、`document.getElementsByClassName()`、`document.getElementsByTagName()` 和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值