[JS]什麼是 element.style ?

我想要修改下圖左側的星星為一行，但是我發現我從更改css width 卻無法變動。
一直看到一個 element.style 的width: 100px;
而css 設定的被阻擋掉了。

後來google找到這篇
https://www.drupal.org/node/229348

element.style is the style that's defines on the element - directly - using style=""

It's the royal flush of element selectors. It's the most specific, un-over-ridable setting.
It's in the source!

so it's coming from the jquery code itself, written in at runtime. And nothing to do with Drupal or your theme for that matter.

You gotta debug jCarousel to find out why it thinks that's a good size. Maybe its calculations are wrong, or maybe it's just hard-coded some padding it thinks looks beter.

You should have seen it in the DOM inspector.

大意就是說這個寬度是由 jquery 即時產生的，所以覆蓋掉css的寬度設定。只能從原本的jquery檔案裡面去更動。

jquery.raty.js 底下，後來在102行找到，將寬度乘上3倍！

更改後的樣子

[文字編輯器]Sublime Text好用套件-Emmet

手動安裝可參考 ：https://www.minwt.com/webdesign-dev/html/11624.html




這邊使用的是sublime2


安裝步驟

1.下載Sublime Text https://www.sublimetext.com/3

2.安裝Package Control

2-1開啟sublime 並開啟Console (位置在最上方的view > Show Console

 可以看到下方出現console

2-2 輸入相對版本的指令 https://sublime.wbond.net/installation

Sublime Text 2

import urllib2,os,hashlib; h = '261dd1222b4693ce6d4f85f9c827ac06' + '6d5ab8ebdd020086947172a8a1356bb6'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

2-3 重開

3.安裝Emmet

3-1 開啟package controller  (Sublime Text2 > perferences >Package Control) 

或快捷鍵(command+shift+p)

3-2 選擇 Package Control:Install Package

3-3 Package Control 視窗會消失，請再開啟一次 (command+shift+p)，並輸入emmet
選擇第一個( 並非我途中所顯示的那個，因為我已經安裝所以不會顯示)

這個才是正確的Emmet (youtube 截圖 from :https://www.youtube.com/watch?v=8n923UBjV9w)

3-4重開 ！！完成




再來是操作 ，在sublime 開啟 html檔案，以下是簡易的教學影片

輸入 .[class name] 後，按鍵盤的Tab鍵 即可變成
<div class="[class name]"></div>
幫你省下許多時間






更多外掛介紹及教學

http://www.slideshare.net/banPrint/sublime-text-51689543

CSS 練習-CSS Diner

http://flukeout.github.io

請用css選擇出盤子！！這是一個css選擇器練習網站，總共有26關，旁邊還有該提的提示
可以快速地學習及練習你的css技巧喔