JS控制css

<style>
#div1 {position:absolute;left:20px;top:30px;width:20px;height:30px;background-color:red}
.red{color: red}
.blue{color: blue}
</style>
<script>
var d = 100;
function test() {
var a = document.getElementById("div1");
a.style.backgroundColor = "blue";
d += 10;
a.style.left = d+"px";

}
</script>
<script>
var d = 100;
function test1() {
var a = document.getElementById("div1");
a.style.backgroundColor = "blue";
d += 10;
a.style.left = d+"px";

}
function test2() {
var a = document.getElementById("div0");
a.className = "blue";//样式的装换
}
</script>

<body onkeypress="ff(event)">
<!-- <input type="button" value="测试" onclick="ff(event)"> -->
<div id = div0 class = "red">aaaa</div>
<div id = div1>
</div>
<input type="button" value="测试1" onclick="test1()">
<input type="button" value="测试2" onclick="test2()">

</body>

JS控制css,布布扣,bubuko.com

时间: 2024-08-08 12:27:16

JS控制css的相关文章

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

用js控制css属性的问题

在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取,能直接赋值 如下: <!DOCTYPE html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=

JS控制css float属性的用法经验总结

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.

Vue.js 控制css样式

<script src="https://unpkg.com/vue/dist/vue.js"></script> <style type="text/css"> .blue{ background-color: blue; } .green{ background-color: green; } div{ width: 400px; height: 200px; border-bottom-width: 2px; } </

用js控制css动画效果@keyframes

今天看到一个css动画样式,然后打算封装一个这个css样式. 我用的react组件,然后map了我要的全部盒子 遇到了困难,我打印e和this,都没有我想用的东西. 持续性困惑. 陷入沉思和沉睡. 然后不停打印refs... 天啊,我在干什么.我执着地寻找style... 我在return的盒子里加了一个style,然后打印了style,的确可以改变css属性 我突然意识到,我需要打印更原始,或者说更底层的一些东西 于是我开始打印window和document,笨蛋啊,操作dom啊 我打印了do

js如何控制css伪元素内容(before,after)

原文:js如何控制css伪元素内容(before,after) js如何控制css伪元素(before,after) @(CSS 笔记)[伪元素|css3]曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗暴的方式: 简单粗暴的方式,直接在html中添加样式覆盖掉之前样式规则 <style> p:after{content:'我是后缀'} <

JavaScript第一讲之js操作css

原本应该是由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-tr

js,css控制网页内容不让选中和复制

---恢复内容开始--- JS, CSS控制网页内容不让选择和复制 CSS 控制: <style> body{ -moz-user-select:none;//针对火狐浏览器,谷歌则-webkit. hutia:expression(this.onselectstart=function(){return(false)}); } </style> JS 控制: onselectstart="return false";

js 控制 table style css

var table = objj.getElementsByTagName('table'); alert(table[i].width); if(table==null) return; for(var i=0; i<table.length; i++) { if(table[i].width>parseInt(objj.style.width)) { table[i].style.width = objj.style.width; } } 注:table[i].width为整形,table