请选择 进入手机版 | 继续访问电脑版

01BIM社区

 找回密码
 立即注册

扫一扫,访问微社区

查看: 3009|回复: 3

JS中style属性

[复制链接]

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
发表于 2022-4-19 06:38:57 | 显示全部楼层 |阅读模式
本帖最后由 tzbm123456 于 2022-4-19 06:49 编辑

JS中style属性
JS中style属性
现在我需要对这个标签赋值,其内容为:
1、需要显示的字为“HELLO WORLD”;
2、span的 background-color : red ,另外还要:border:1px solid #333333;cursor:hand;
我需要在<script></script>内把他们赋值,请问怎么写呢?难道要:
document.getElementById("a").style.background="red"; 来一项一项的写?
能不能一下子把style写完啊,怎么写啊?
解决办法:
1、先定义一个CSS规则,然后this.className=''
2、document.getElementById("a").style.cssText="border-collapse:collapse;border-spacing:1;border:1 solid #0B2565;background-color:white;color:black;"

JS操作css的float属性的特殊写法
使用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.fontFamily等。
  这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。
  这个特殊的属性就是:
float。我们不能直接使用obj.style.float来使用,这样操作是无效的。
其正确的使用方法是为:IEbj.style.styleFloat,其他浏览器bj.style.cssFloat。



回复

使用道具 举报

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
 楼主| 发表于 2022-4-19 09:58:16 | 显示全部楼层
本帖最后由 tzbm123456 于 2022-4-19 10:18 编辑

        function css(){
                //document.getElementsByTagName("body")[0].style.cssText="background: #00ff00 url('smiley.gif') no-repeat fixed center"
                document.getElementsByTagName("body")[0].style.backgroundImage="url('smiley.gif')";
                document.getElementsByTagName("body")[0].style.backgroundColor="#cccccc";
                document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat";
                document.getElementsByTagName("body")[0].style.backgroundPosition="center";
        }

回复 支持 反对

使用道具 举报

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
 楼主| 发表于 2022-4-19 10:38:32 | 显示全部楼层
本帖最后由 tzbm123456 于 2022-4-19 14:01 编辑

Stats()状态显示函数
        function initStats() {
            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById("Stats-output").appendChild(stats.domElement);
                //Stats对象div的id共有7个:
                //stats
                //fps、fpsText、fpsGraph
                //ms、msText、msGraph
                //可以通过document.getElementById("XXXX").style.XXXX控制其样式
                        //stats.domElement.style.cssText="left:100px";
                        document.getElementById("stats").style.left='100px';
                        //document.getElementById("fps").style.background='#aaa';
                        //document.getElementById("fpsGraph").style.background='#f00';
                        //document.getElementById("fpsText").style.color='#0ff';
            return stats;
        }


回复 支持 反对

使用道具 举报

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
 楼主| 发表于 2022-4-19 13:56:33 | 显示全部楼层
本帖最后由 tzbm123456 于 2022-4-19 20:46 编辑

dat.GUI()的界面风格控制
var gui = new dat.GUI();
var folder = gui.addFolder('菜单_1>>');//添加文件夹
folder.add(controls, '旋转速度', 0, 0.5);
folder.add(controls, '弹击速度', 0, 0.5);
folder.add(controls, '姓名');
folder.add(controls, '身高');
var folder_2 = gui.addFolder('菜单_2>>');//添加文件夹
folder_2.add(controls, '旋转速度', 0, 0.5);
folder_2.add(controls, '弹击速度', 0, 0.5);
folder_2.add(controls, '姓名');
folder_2.add(controls, '身高');
//document.querySelector('.property-name').style.color='#f00'
//alert(document.getElementsByClassName('property-name').length)
//属性名称的颜色、背景、字高
var arr_1=document.getElementsByClassName('property-name');
for(var i=0;i<arr_1.length;i++){
        arr_1.style.color='#f00';
        arr_1.style.background='#fff';

        arr_1.style.fontSize='18px';
        arr_1.style.fontFamily="黑体";
}
//文本文字背景
var arr_C=document.getElementsByClassName('c');
//alert(arr_C.length);
for(var i=0;i<arr_C.length;i++){
        var arr_I=arr_C.getElementsByTagName('input');
        //alert(arr_I.length);
        arr_I[0].style.background='#555';
        arr_I[0].style.fontSize='18px';
}
//滑动条颜色:前|背景
var arr_S=document.getElementsByClassName('slider-fg');
for(var i=0;i<arr_S.length;i++){
        arr_S.style.background='#ff0';
}
var arr_S=document.getElementsByClassName('slider');
for(var i=0;i<arr_S.length;i++){
        arr_S.style.background='#fff';
}
//每行的背景颜色
var arr_Li=document.getElementsByTagName('li');
//alert(arr_Li.length)
for(var i=0;i<arr_Li.length;i++){
        arr_Li.style.background='#222';
}
//fold颜色、字高
var arr=document.getElementsByClassName('title');
for(var i=0;i<arr.length;i++){
        arr.style.background='#888';
        arr.style.fontSize='18px';
}
document.getElementsByClassName('close-button')[0].style.background='#000';
document.getElementsByClassName('close-button')[0].style.fontSize='18px';
document.getElementsByClassName('close-button')[0].innerHTML="折叠菜单"
render();


function render() {
        stats.update();
        // rotate the cube around its axes
        cube.rotation.x += controls.旋转速度;
        cube.rotation.y += controls.旋转速度;
        cube.rotation.z += controls.旋转速度;


        // bounce the sphere up and down
        step += controls.弹击速度;
        sphere.position.x = 20 + ( 10 * (Math.cos(step)));
        sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));


        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
}

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|01BIM社区 - 最专业的BIM技术交流平台 ( 渝ICP备15000873号 )

GMT+8, 2024-3-29 18:42 , Processed in 0.051094 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表