Setting inline styles

To set the inline style of an element, you use the style property of that element:

element.style
Code language: CSS (css)

The style property returns the read-only CSSStyleDeclaration object that contains a list of CSS properties. For example, to set the color of an element to red, you use the following code:

element.style.color = 'red';
Code language: JavaScript (javascript)

If the CSS property contains hyphens (-) for example -webkit-text-stroke you can use the array-like notation ([]) to access the property:

element.style.['-webkit-text-stock'] = 'unset';
Code language: JavaScript (javascript)

Read More

瀏覽器接收到伺服器的回應後，都會自動去判讀網頁的狀態，其中的 Http Status代碼的意思如下：

Read More

CSS 自定義屬性：調整大小的技巧

如果我們想要把內容鎖定在一個頁面的高度，在電腦版很自然會想到用 100vh 去設定，但在 safari 會遇到一個問題就是你預期他高度是一個螢幕高，但 header 跟底下的 nav 會把螢幕蓋掉，這樣就會發有一部分被遮掉了，這個用這張圖來看就很清楚。

在 JavaScript 中，您始終可以通過使用全局變量來獲取當前視口的值window.innerHeight。該值將瀏覽器的界面考慮在內，並在其可見性更改時更新。訣竅是將視口值存儲在 CSS 變量中，並將其應用於元素而不是單元vh。

假設我們的 CSS 自定義變量--vh用於此示例。這意味著我們將希望像這樣在我們的 CSS 中應用它：

.my-element { 

Read More

STEP 1:

準備HTML

<div class="box">
<p class="JQellipsis">Astral Web是一群對網路充滿熱情的團隊，我們相信網路的力量無遠弗屆，人人都有機會開創網路事業。一邊享受網路事業帶來的樂趣，一邊秉持著工作即是玩樂的精神，不斷激發各種靈感為客戶提高收益，提供最完善的服務。</p>
</div>

STEP 2:

載入jquery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

STEP 3:

<script>
$(function(){
    var len = 50; // 超過50個字以"..."取代
    $(".JQellipsis").each(function(i){
        if($(this).text().length>len){
            $(this).attr("title",$(this).text());
            var text=$(this).text().substring(0,len-1)+"...";
            $(this).text(text);
        }
    });
});
</script>

Read More

我們在設計RWD 網頁時，常常會多個螢幕去測試字體大小問題，有時候在手機文字呈現時太小，在PC大螢幕時又太大。

一般來說在編寫  CSS 的時候，都習慣將網頁上的字體大小 font-size 使用 rem、em、px等單位，但是如果我們要寫 RWD 的情況時，在Pc上測試標題字看起來很舒適，但是一到手機版又會顯得太大。

em : 元素內父層定義的文字大小，em是相對於父層文字大小，例如：父層16px，5em 為 80px。

rem : 元素底層定義的文字大小，rem是相對於底層文字大小，例如：底層預設為20px，2rem為40px。

vw：viewport width 的縮寫。是相對螢幕寬度大小的百分比例。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。手機版414px 寬度時9vw就是414*9% = 37.26px。

Read More

 

CSS Flexbox 是排版模組，它包含了四種類型：

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

Read More

CSS 中可以做到的方法很少，但使用哪一種完全取決於實際情況。我將一一列出，以便您選擇更好地解決您的問題的選項。

Read More