MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2025-06-26, 07:36

所有顯示的時間為 UTC + 8 小時





發表新文章 回覆主題  [ 16 篇文章 ]  前往頁數 12  下一頁
發表人 內容
文章發表於 : 2007-07-27, 20:04 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
下面是我簡單寫的CSS
代碼:
.pic img
{
   width:50;
   height:50;
}


如何用JS改變裡面屬性的值呢? 我想要的結果是改變值之後,所有有用到此CSS的都能一起改變,我之前是想說直接抓element用for跑,感覺這樣不太好,想說有沒有一個方法可以辦的到,我看過有用CSS expression,但那好像只有IE能用,麻煩各位解答了,謝謝。


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-28, 00:10 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
這就是為什麼需要 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 的支援度無關。

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-28, 09:42 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
請問抓下來後要怎麼使用它呢? 新手第一次用,不知該如何動手@@
我是將他用<script>加到網頁上,然後再別的*.js使用指令,這樣好像不行。


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-28, 10:08 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
我又試了一下,原來是用
代碼:
$('.pic p a:hover').css({width:100, height: 100});


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

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

改用prototype之後,變成他只判斷到a而後面的hover忽略了


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-28, 11:27 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
首先,width 或 height 必須是字串,不能放數字,因為 CSS 值必須有單位,如 px。光放數字會出現光怪陸離、意想不到的後果。
再者,:hover 是個「擬類別」(pseudo-class),hover 的狀態只會瞬間存在,所以幾乎所有的 js lib 都不支援。

會什麼需要用到 :hover?或許有什麼代替的方法...但要用什麼代替方法是視原因而定,不知道為何需要用 :hover?

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-28, 14:04 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
其實我只是利用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++影響了@@,要怎樣看呢?


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-29, 00:29 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
如果只是要做 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」。

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-29, 10:49 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
感謝kourge提供這麼多訊息
引言回覆:
$ 不是什麼神奇的東西,只是個 function 罷了,接受的 parameter 是個 string,這個 string 就是 CSS 語法,傳回的就是一個陣列的 DOM 元素。


這裡我有點不太懂,$是個function,我看jQuery裡面沒這個function,而且jQuery裡面function和參數的命名,看不懂他要做什麼功能、想要讓我們傳入什麼值@@


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-29, 13:06 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
jQuery 要慢慢解析太複雜啦~>_<
不過之所以看不出來大致上是因為類似這種作法
var jQuery = function() {/*...*/};
var $ = jQuery;
這樣 $ 跟 jQuery 兩個都是一樣的 function。

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-29, 14:25 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
果然還是要用到的時候再去想這個問題比較好XD,感謝大大的指教,小弟受益良多。


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-29, 19:40 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
不好意思又有一個問題,請問jquery裡面有overflow後增加捲軸的嗎?或者是有別的方式?麻煩指教,感謝。


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-29, 23:00 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
fanta 寫:
不好意思又有一個問題,請問jquery裡面有overflow後增加捲軸的嗎?或者是有別的方式?麻煩指教,感謝。

overflow 是指 CSS 嗎?

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-30, 00:14 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
我想做的是,像是div區塊裡面或者其他區塊裡面的圖片或文字超出範圍時,能在JS得到觸發,然後給予一個符合容納內容的捲軸區塊,不知道該如何做,但是我剛試了一下,原來CSS裡面已經有了自動增加捲軸的功能@@,但是我還是不知道如何用JS判斷該區塊有沒有overflow,有內建的函式嗎?該如何寫呢?


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-30, 05:45 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
要拿 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

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-07-30, 18:12 
離線

註冊時間: 2007-06-20, 15:36
文章: 30
kourge大大辛苦了
我試了好久,以下兩種方法在Mozilla都不行@@,IE可以
document.getElementById('blah').scrollHeight
$('#blah').get(0).scrollHeight

我在Mozilla抓到scrollHeight和offsetHeight的值是一樣的,是我寫法錯了嗎?但是IE可以@@


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5
 個人資料  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  [ 16 篇文章 ]  前往頁數 12  下一頁

所有顯示的時間為 UTC + 8 小時


誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 11 位訪客


不能 在這個版面發表主題
不能 在這個版面回覆主題
不能 在這個版面編輯您的文章
不能 在這個版面刪除您的文章
不能 在這個版面上傳附加檔案

搜尋:
前往 :  
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW,Mozilla 台灣社群