MozTW 討論區
https://forum.moztw.org/

請問如何用JS改變CSS屬性的值呢?
https://forum.moztw.org/viewtopic.php?f=13&t=19855		 第 1 頁 (共 2 頁)
發表人:  fanta [ 2007-07-27, 20:04 ]
文章主題 :  請問如何用JS改變CSS屬性的值呢?
下面是我簡單寫的CSS
代碼:
.pic img
{
   width:50;
   height:50;
}


如何用JS改變裡面屬性的值呢? 我想要的結果是改變值之後，所有有用到此CSS的都能一起改變，我之前是想說直接抓element用for跑，感覺這樣不太好，想說有沒有一個方法可以辦的到，我看過有用CSS expression，但那好像只有IE能用，麻煩各位解答了，謝謝。
發表人:  kourge [ 2007-07-28, 00:10 ]
文章主題 : 
這就是為什麼需要 js lib 的原因，因為 js lib 可以靠 CSS 來取得元素。有很多東西 js lib 早就能做到的，像你所描述的，用 Prototype 的話，可以這樣寫：
代碼:
$$('.pic img').invoke('setStyle', {width: '100px', height: '100px'});

如果用 jQuery 的話，可以這樣寫
代碼:
$('.pic img').css({width: '100px', height: '100px'});

另外，因為這些 js lib 支援的 CSS 跟瀏覽器對 CSS 的支援度無關。
發表人:  fanta [ 2007-07-28, 09:42 ]
文章主題 : 
請問抓下來後要怎麼使用它呢? 新手第一次用，不知該如何動手@@
我是將他用<script>加到網頁上，然後再別的*.js使用指令，這樣好像不行。
發表人:  fanta [ 2007-07-28, 10:08 ]
文章主題 : 
我又試了一下，原來是用
代碼:
$('.pic p a:hover').css({width:100, height: 100});


以上寫法好像不行，針對
代碼:
a:hover

好像不行，其他的可以，請問這種情形用法有不一樣嗎?我是選用 jQuery

改用prototype之後，變成他只判斷到a而後面的hover忽略了
發表人:  kourge [ 2007-07-28, 11:27 ]
文章主題 : 
首先，width 或 height 必須是字串，不能放數字，因為 CSS 值必須有單位，如 px。光放數字會出現光怪陸離、意想不到的後果。
再者，:hover 是個「擬類別」(pseudo-class)，hover 的狀態只會瞬間存在，所以幾乎所有的 js lib 都不支援。

會什麼需要用到 :hover？或許有什麼代替的方法...但要用什麼代替方法是視原因而定，不知道為何需要用 :hover？
發表人:  fanta [ 2007-07-28, 14:04 ]
文章主題 : 
其實我只是利用a:hover的特性做一些效果而已，就像是onmouseover，只是用a:hover不需要再寫JS function，直接在CSS修改就好了。

再請問一下，js lib裡面那麼多function可以用，但是都不知道該如何使用，就像
代碼:
$('.pic p a:hover').css({width:100, height: 100});


為什麼要這樣寫呢? 一般用物件可能就
代碼:
obj.function(parameter1,parameter2,.....)


我的意思是為什麼使用時撰寫的形式要像第一個那樣，還是我被C/C++影響了@@，要怎樣看呢?
發表人:  kourge [ 2007-07-29, 00:29 ]
文章主題 : 
如果只是要做 CSS 效果，用靜態的 CSS 檔就可以了，為何需要用到 JS？是因為要改成的樣式會隨情況變動？還是說只是要利用 mouseover 做效果？如果是這樣，可以這樣弄：
代碼:
$('.pic p a').hover(
  function() {
    $(this).css({width: '100px', height: '100px'});
  },
  function() {
    $(this).css({width: '50px', height: '50px'});
  }
)

hover 接受兩個參數，第一個參數就是 onmouseover 的時候你想要執行的 function，第二個參數就是 onmouseout 的時候你像要執行的 function。這是靠 event 來運作的。請見 http://visualjquery.com/ 。有時候有些瀏覽器不支援如 div:hover 這種語法（只支援 a:hover），如 IE，但是還是想做這種效果，也可以用者種「技倆」。

引言回覆:
代碼:
obj.function(parameter1,parameter2,.....)

JS 的語法的確也一樣啊！
$('.pic p a') 就是 obj，css() 就是 function。
你如果要寫成：
代碼:
var obj = $('.pic p a');
obj.css({width: '100px', height: '100px'});

也可以，只是那樣很畫蛇添足。$ 不是什麼神奇的東西，只是個 function 罷了，接受的 parameter 是個 string，這個 string 就是 CSS 語法，傳回的就是一個陣列的 DOM 元素。

對 JS 來說什麼東西都是物件，連 function 也是物件，因此，以下兩者是一樣的：
代碼:
function blah() {}
var blah = function() {};

很多人要把字串轉換成大寫，都會這樣寫：
代碼:
var string = 'Hello';
var newString = string.toUpperCase();

其實可以寫得更精簡：
代碼:
var newString = 'Hello'.toUpperCase();

因為連字串都是物件。JS 的動態特性是 C 或 C++ 無法比得上的，但語法卻和 C 很像，所以有個說法，說「JavaScript 是被了 C 毛衣的 Lisp」。
發表人:  fanta [ 2007-07-29, 10:49 ]
文章主題 : 
感謝kourge提供這麼多訊息
引言回覆:
$ 不是什麼神奇的東西，只是個 function 罷了，接受的 parameter 是個 string，這個 string 就是 CSS 語法，傳回的就是一個陣列的 DOM 元素。


這裡我有點不太懂，$是個function，我看jQuery裡面沒這個function，而且jQuery裡面function和參數的命名，看不懂他要做什麼功能、想要讓我們傳入什麼值@@
發表人:  kourge [ 2007-07-29, 13:06 ]
文章主題 : 
jQuery 要慢慢解析太複雜啦～>_<
不過之所以看不出來大致上是因為類似這種作法
var jQuery = function() {/*...*/};
var $ = jQuery;
這樣 $ 跟 jQuery 兩個都是一樣的 function。
發表人:  fanta [ 2007-07-29, 14:25 ]
文章主題 : 
果然還是要用到的時候再去想這個問題比較好XD，感謝大大的指教，小弟受益良多。
發表人:  fanta [ 2007-07-29, 19:40 ]
文章主題 : 
不好意思又有一個問題，請問jquery裡面有overflow後增加捲軸的嗎?或者是有別的方式?麻煩指教，感謝。
發表人:  kourge [ 2007-07-29, 23:00 ]
文章主題 : 
fanta 寫:
不好意思又有一個問題，請問jquery裡面有overflow後增加捲軸的嗎?或者是有別的方式?麻煩指教，感謝。

overflow 是指 CSS 嗎？
發表人:  fanta [ 2007-07-30, 00:14 ]
文章主題 : 
我想做的是，像是div區塊裡面或者其他區塊裡面的圖片或文字超出範圍時，能在JS得到觸發，然後給予一個符合容納內容的捲軸區塊，不知道該如何做，但是我剛試了一下，原來CSS裡面已經有了自動增加捲軸的功能@@，但是我還是不知道如何用JS判斷該區塊有沒有overflow，有內建的函式嗎?該如何寫呢?
發表人:  kourge [ 2007-07-30, 05:45 ]
文章主題 : 
要拿 scrollWidth 和 scrollHeight 來比對元素的實際大小。
如果一樣，那就是沒有 overflow 捲動，如果其中一個比實際大小還要大，那就是有 overflow 捲動。

順帶一提：
jQuery 文件： http://visualjquery.com/
Prototype 文件： http://prototypejs.org/api

要跨瀏覽器取得一個元素的實際大小不是容易的事情，不過 Prototype 和 jQuery 各有方法XD
以下段 HTML 為例：
<div id="blah" 等等

Prototype 的方法：
var x = $('blah').getDimensions();
這時，x.width 就是實際寬度，x.height 就是實際高度。

jQuery 的方法：
$('#blah').width() 就是實際寬度，
$('#blah').height() 就是實際高度。

Prototype 也可以光取寬度或長度：
$('blah').getWidth() 就是實際寬度，
$('blah').getHeight() 就是實際高度。

jQuery 一定要寬高分開取，Prototype 可以寬高一起取，也可以分開取。

差點忘了提，正常來說 scrollWidth 和 scrollHeight 是要像類似下面的語法來取：
document.getElementById('blah').scrollWidth
document.getElementById('blah').scrollHeight

不過如果你用 Prototype 或 jQuery，方法就不大一樣。
用 Prototype 的話：
$('blah').scrollWidth
$('blah').scrollHeight

用 jQuery 的話：
$('#blah').get(0).scrollWidth
$('#blah').get(0).scrollHeight
這是因為 jQuery 用 $ 所傳回來的元素還不是所謂「正常」的 DOM 元素，而是一個陣列，要用 get(0) 把「正常」的 DOM 元素抽出來。
get(0) 是 jQuery 提供的方法，不過既然是陣列，也可以這樣：
$('#blah')[0].scrollWidth
$('#blah')[0].scrollHeight
發表人:  fanta [ 2007-07-30, 18:12 ]
文章主題 : 
kourge大大辛苦了
我試了好久，以下兩種方法在Mozilla都不行＠＠，IE可以
document.getElementById('blah').scrollHeight
$('#blah').get(0).scrollHeight

我在Mozilla抓到scrollHeight和offsetHeight的值是一樣的，是我寫法錯了嗎?但是IE可以@@
第 1 頁 (共 2 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/