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們{……}’

;

}