JavaScript如何操作css

2024-09-28 19:33:13

原本应该是由css进行控制html中的div的宽高和背景颜色，但是在下方使用了JavaScript进行重新调用了div盒子，并且覆盖了css原本的属性内容。

需求目标:由 100 像素的粉色背景色的div盒子变成了 300像素的橘黄色效果的div盒子

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制css</title>
<style>
 <!-- div是html盒子的元素选择器 -->
div{
 background:pink;  <!-- 背景色：粉色 -->
 width:100px;  <!-- 宽度：100像素-->
 height:100px;  <!-- 高度：100像素 -->
}
</style>
</head>

<body>
<div id="txt"></div>

</body>
</html>
<!-- JavaScript代码只能在下面的script的标签体中可以书写 -->
<script>
//方式一:

 //查找到id为div的标签之后 继续查找style属性
 // document.getElementById('txt').style.width='300px';
 // document.getElementById('txt').style.height='300px';
 // document.getElementById('txt').style.background='orange';

//方式二:

 //先找到 id 为txt 的元素，把它放到一个变量中,这个过程可以理解为将右侧的结果赋值给左侧
 var t = document.getElementById('txt');
 // t就是变量名称，代表着html的盒子所在位置

 // 将盒子的样式中的宽度设置为300像素
 t.style.width='300px';
 // 将盒子的样式中的高度设置为300像素
 t.style.height='300px';
 // 将盒子的样式中的背景色设置橘黄色
 t.style.background='orange';

</script>

运行后的效果图如下:

以上就是JavaScript如何操作css的详细内容，更多关于JavaScript操作CSS的资料请关注我们其它相关文章！

详解Javascript动态操作CSS

一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamil
js操作css属性实现div层展开关闭效果的方法

本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma
使用js操作css实现js改变背景图片示例

1.用JS定义一个图片数组,里面存放你想要随机展示的图片复制代码代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/
使用JS来动态操作css的几种方法

JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.DOM API,还有一组不太为人所知的 CSS API. 由于JSX和无数JS框架的出现,使通过JS API与DOM交互的想法真正流行起来,但是在 CSS 中使用类似技术似乎并没有很多. 当然,存在像CSS-in-JS这类解决方案,但是最流行的解决方案还是基于转译(transpilation),无需额
JS批量操作CSS属性详细解析

复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> .day { background-color:White; } .nig
Vue.js中对css的操作（修改）具体方式详解

使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas
js css样式操作代码（批量操作）

我们用js书写css样式通常会用下面的两种方式: 一般情况下我们用js设置元素对象的样式会使用这样的形式: 复制代码代码如下: var element= document.getElementById("id"); element.style.width="20px"; element.style.height="20px"; element.style.border="solid 1px red"; 但是上面的方法有一个缺
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法

需求描述,由于工作的需要,需要将原本用于1280720的网页改为19201080的网页(电视端页面).需求可以拆分为两部分,代码部分的修改以及图片的修改.在代码部分,需要将所有位置以及大小相关的值乘以1.5,图片的尺寸也要放大1.5倍. 首先使用nodejs遍历当前的文件夹: // 遍历所有的文件 var fs = require("fs") var path = require("path") var relativePath = '\\test' // 拿到需要
JS实现css hover操作的方法示例

本文实例讲述了JS实现css hover操作的方法.分享给大家供大家参考,具体如下: hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <style type="text/css"> *{ padding:0px; margin:0px; } ul li{ list-style: none; } a{ text-decoration:
js 操作css实现代码

当我们需要的是一条规则的时候,总不能在每次dom发生变化的时候去执行这个操作,否则也太效率低下了.好在dom中css rules也是可以修改的.不过不同浏览器的对于css rules的接口描述也不同,其中ie中以类似hash table的方式,而ff以数组方式. 从可编程性上说,ie的接口描述更讨程序员喜欢,不过从逻辑上说,ff显然更为合理. 我提供了类似于ie的方式对两套代码进行简单包装,不过ie在dom的css removeRule之后并不能确定同步的把规则兑现.所以最好用规则覆盖的方式而非
js中巧用cssText属性批量操作样式

给一个HTML元素设置css属性,如复制代码代码如下: var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block"; 这样写太罗嗦了,为了简单些写个工具函数,如复制代码代码如下: function setStyle(obj,c

JavaScript如何操作css

相关推荐

随机推荐