cssjs钟表样式（js表格样式）

本文目录一览：

• 1、JS调用CSS样式表问题（功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』）
• 2、JS中改变CSS样式的问题
• 3、css怎么样制作钟表
• 4、如何用JS修改已加载的CSS样式表样式？
• 5、关于CSS样式表和JS之间的影响。
• 6、如何为网页JavaScript添加CSS样式表

JS调用CSS样式表问题（功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』）

用CSS：

input:hover {border: 5px solid #000;}

用Javascript：

input name=”” type=”text” onmouseover=”this.style.border = ‘5px solid #000’;” onmouseout=”this.removeAttribute(‘style’);” /

JS中改变CSS样式的问题

其实你的代码没有问题，是一个先后顺序。浏览器解析，读取时的先后问题，你的onload表示，浏览器加载页面开始就调用这个方法，他这个时候还没有读取到下面的div呢

你不要放在head标签里面的，正规的写法其实应该放在/body后面，这样不论怎么样都可以的，保证正确

css怎么样制作钟表

代码如下：

!DOCTYPE html

html lang=”en” xmlns=””

head

meta charset=”utf-8″ /

titlecanvas实例–制作时钟/title

/head

body

canvas id=”canvas” width=”500″ height=”500″

您的浏览器版本太低啦！可以换了！

/canvas

script

//获取canvas

var canvas = document.getElementById(“canvas”);

//设置环境

var cxt = canvas.getContext(“2d”);

//制作时钟的函数

function DrawClock() {

//清除画布

cxt.clearRect(0,0,500,500);

//获取当前时间的时，分，秒

var now = new Date();

var hour = now.getHours();

var min = now.getMinutes();

var sec = now.getSeconds();

//小时必须获取浮点型（小时+分数—转化为的小时）

hour = hour + min / 60;

//将24小时转换为12小时

hour = hour 12 ? hour – 12 : hour;

//制作表盘

cxt.beginPath();

cxt.lineWidth = 10;

cxt.strokeStyle = “#ABCDEF”;

cxt.arc(250, 250, 200, 0, 360, false);

cxt.stroke();

cxt.closePath();

//刻度

//时针

for (var i = 0; i 12; i++) {

cxt.save();

cxt.lineWidth = 7;

cxt.strokeStyle = “red”;

//设置0,0点

cxt.translate(250, 250);

//再设置旋转角度

cxt.rotate(i * 30 * Math.PI / 180);

cxt.beginPath();

cxt.moveTo(0, -170);

cxt.lineTo(0, -190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//分针

for (var i = 0; i 60; i++) {

//为避免不同颜色的重叠，

//在时针刻度与分针刻度重叠的位置，不画分针

if (i % 5 == 0) continue;

cxt.save();

//设置刻度粗细

cxt.lineWidth = 5;

cxt.strokeStyle = “purple”;

//设置画布的0,0点

cxt.translate(250, 250);

//设置旋转角度

cxt.rotate(i * 6 * Math.PI / 180);

//画分针刻度

cxt.beginPath();

cxt.moveTo(0, -180);

cxt.lineTo(0, -190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//时针

cxt.save();

//设置时针风格

cxt.lineWidth = 7;

cxt.strokeStyle = “pink”;

//设置异次元空间的0,0点

cxt.translate(250, 250);

//设置旋转角度

cxt.rotate(hour * 30 * Math.PI / 180);

cxt.beginPath();

cxt.moveTo(0, -140);

cxt.lineTo(0, 10);

cxt.closePath();

cxt.stroke();

cxt.restore();

//分针

cxt.save();

//设置分针风格

cxt.lineWidth = 5;

cxt.strokeStyle = “orange”;

//设置异次元空间的0,0点

cxt.translate(250, 250);

//设置旋转角度

cxt.rotate(min * 6 * Math.PI / 180);

cxt.beginPath();

cxt.moveTo(0, -160);

cxt.lineTo(0, 15);

cxt.closePath();

cxt.stroke();

cxt.restore();

//秒针

cxt.save();

//风格

cxt.strokeStyle = “yellow”;

cxt.lineWidth = 3;

//重置0，0点

cxt.translate(250, 250);

//设置旋转角度

cxt.rotate(sec*6*Math.PI/180);

//画图

cxt.beginPath();

cxt.moveTo(0, -170);

cxt.lineTo(0, 20);

cxt.stroke();

//画出时针，分针，秒针的交叉点

cxt.beginPath();

cxt.arc(0, 0, 5, 0, 360, false);

cxt.closePath();

//设置填充样式

cxt.fillStyle = “blue”;

cxt.fill();

//设置笔触样式—秒针已设置

cxt.stroke();

//设置秒针前端的小圆点

cxt.beginPath();

cxt.arc(0, -150, 5, 0, 360, false);

cxt.closePath();

//设置填充样式

cxt.fillStyle = “blue”;

cxt.fill();

//设置笔触样式

cxt.stroke();

cxt.closePath();

cxt.restore();

}

//调用函数

DrawClock();

//设置时钟转动起来

setInterval(DrawClock, 1000);

/script

/body

/html

如何用JS修改已加载的CSS样式表样式？

js是无法直接修改css文件的，但可以通过取对象的方式修改对象的样式，通常有两种方法：

1、改变className，但首先在样式表中预设定样式类。

例如：document.getElementById(‘obj’).className=’…’;

2、改变cssText。

例如：document.getElementById(‘obj’).style.height=’100px’;

关于CSS样式表和JS之间的影响。

你好，其实原因很简单，因为你用js设置的时候，忘记加单位了：

!Doctype html

head

meta charset=”utf-8″

title无标题文档/title

script type=”text/javascript”

    function changexy(){

        var f = document.getElementById(“f”);

        f.style.left = parseInt(f.style.left) + 1 + ‘px’;

        f.style.top = parseInt(f.style.top) + 1 + ‘px’;

    }

    function run(){

        setInterval(changexy, 150);

    }

    /script

/head

body onload=”run()”

    div id=”f” style=”width:100px; height:100px; background:#F00; position:absolute; left:10px; top:10px;”aaa/div

/body

/html

left、top上加上单位”px”就可以移动起来了，望采纳~~

如何为网页JavaScript添加CSS样式表

可以通过添加样式表ID并对其判断来实现：

[javascript] view plaincopy

if (!document.styleSheets[‘要建立的样式表ID如theforever’]) { //先检查要建立的样式表ID是否存在，防止重复添加

var ss = document.createStyleSheet();

ss.owningElement.id = ‘要建立的样式表ID如theforever’;

ss.cssText = ‘标签{display:inline-block;overflow:hidden;’ +

// 这个注释只在当前JS中帮助理解，并不会写入CSS中

‘text-align:left;width:300px;height:150px}’ +

‘.类名{……}’ +

‘#ID们{……}’

;

}