JS中style属性
本帖最后由 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来使用，这样操作是无效的。其正确的使用方法是为：IE:obj.style.styleFloat，其他浏览器:obj.style.cssFloat。
本帖最后由 tzbm123456 于 2022-4-19 10:18 编辑
function css(){
//document.getElementsByTagName("body").style.cssText="background: #00ff00 url('smiley.gif') no-repeat fixed center"
document.getElementsByTagName("body").style.backgroundImage="url('smiley.gif')";
document.getElementsByTagName("body").style.backgroundColor="#cccccc";
document.getElementsByTagName("body").style.backgroundRepeat="no-repeat";
document.getElementsByTagName("body").style.backgroundPosition="center";
}
本帖最后由 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;
}
本帖最后由 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.style.background='#555';
arr_I.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').style.background='#000';
document.getElementsByClassName('close-button').style.fontSize='18px';
document.getElementsByClassName('close-button').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);
}
页:
[1]