調整html元素大小 resize

阿新 • • 發佈：2019-02-06

1、使用css屬性：resize

div{ resize: both;}

resize 屬性規定是否可由使用者調整元素的尺寸。

取值：

none：預設，使用者無法調整元素的尺寸。
Both：使用者可調整元素的高度和寬度。
Horizontal：使用者可調整元素的寬度。
Vertical：使用者可調整元素的高度。

缺點：不支援ie！僅Firefox 4+、Chrome 以及 Safari 支援 resize。

2、自己造一個輪子

使用拖拽改變元素大小。
這裡寫圖片描述
以上圖為例，父層div包裹著內容區，在父層div裡還有三個div，分別位於父層div的下方，右方及右下方。拖拽下方div可改變父層div的高度，拖拽右方div可改變父層div的寬度，拖拽右下方div可改變父層div的寬度及高度。

//程式碼實現
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>resize</title>
    <style> 

        .myResize{
            width: 300px;
            height:300px;
            position: relative;
            border-top: 3px solid #00f;
            border-left: 3px solid #00f;
        }
        .myResize .bottom,
        .myResize .right,
        .myResize .bottom-right{
            position: absolute 
;
            background: #00f;
        }
        .myResize .bottom{
            width: calc(100% - 6px);
            height:3px;
            bottom:0;
            cursor: s-resize;
        }
        .myResize .right{
            width: 3px;
            height:calc(100% - 6px);
            right:0;
            cursor: e-resize;
        }
        .myResize .bottom-right{
            width: 6px;
            height:6px;
            right:0;
            bottom:0;
            cursor: se-resize;
        }
        .myResize .content{
            width: calc(100% - 3px);
            height: calc(100% - 3px);
            position: absolute;
            background: #efefef;
        }
    </style>
</head>
<body>
    <div class="myResize">
        <div class="bottom"></div>
        <div class="right"></div>
        <div class="bottom-right"></div>
        <div class="content"></div>
    </div>
    <script>
        function resize(option){
            option = option || {};
            var minWidth = parseInt(option.minWidth) || 5,//最小寬度，未設定則預設5
                minHeight = parseInt(option.minHeight) || 5,//最小高度，未設定則預設5
                el = document.querySelector(option.el),
                hasWidth,
                hasHeight;
            el.draggable = false;
            el.parentNode.draggable = false;
            switch(option.type){
                case 'bottom':hasHeight = true;break;
                case 'right':hasWidth = true;break;
                case 'bottom-right':hasWidth = true;hasHeight = true;break;
                default:return;
            }
            el.onmousedown = function (e) {
                //滑鼠按下，計算當前元素距離可視區的距離
                if(hasWidth){
                    var disX = e.clientX;
                    var w = parseInt(window.getComputedStyle(el.parentNode).width);
                }
                if(hasHeight){
                    var disY = e.clientY;
                    var h = parseInt(window.getComputedStyle(el.parentNode).height);
                }
                document.onmousemove = function (e) {
                    var ew,eh;
                    //通過事件委託，計算移動的距離
                    if(hasWidth){
                        var tx = disX - e.clientX;
                        ew = w-tx;
                        el.parentNode.style.width = (ew<minWidth?minWidth:ew) + 'px';
                    }
                    if(hasHeight){
                        var ty = disY - e.clientY;
                        eh = h-ty;
                        el.parentNode.style.height = (eh<minHeight?minHeight:eh) + 'px';
                    }
                    //回撥函式
                    option.callBack && option.callBack(ew?ew:eh,ew?eh:null);
                };
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        }
        function callBack(w,h){
            console.log(w,h)
        }
        ['bottom','right','bottom-right'].forEach(function(item,index){
            resize({
                el:'.'+item,
                type:item,
                callBack:callBack//回撥函式
            })
        })
    </script>
</body>
</html>

vue自定義resize指令，拖拽改變父元素高度

Vue.directive('dragsize',//自定義指令
    {bind:function (el, binding, vnode) {
            el.draggable = false;
            el.onmousedown = function (e) {
                el.parentNode.draggable = false
                //滑鼠按下，計算當前元素距離可視區的距離
                let disY = e.clientY;
                let h = parseInt(window.getComputedStyle(el.parentNode).height);
                document.onmousemove = function (e) {
                    //通過事件委託，計算移動的距離
                    let t = disY - e.clientY;
                    el.parentNode.style.height = ((h+t)<5?5:(h+t)) + 'px';//最小寬度，預設5
                    //回撥函式
                    binding.value(h+t)
                };
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        }
    }
);

調整html元素大小 resize

1、使用css屬性：resize div{ resize: both;} resize 屬性規定是否可由使用者調整元素的尺寸。取值： none：預設，使用者無法調整元素的尺寸。 Both：使用者可調整元素的高度和寬度。 Horizontal：使用者

JS調整html元素大小

想在頁面上實現拖動兩個元素分界位置可以改變元素的大小，基本思路是：在兩個元素之間增加一個分界元素，監聽該元素的mousedown事件，事件觸發時立刻設定監聽頁面mousemove事件以及mouseup事件，mousemove事件處理元素大小修改，mouseup

使用html元素的getBoundingClientRect來獲取dom元素的時時位置和大小

html 可能 .get dom元素 logs query htm images cli 使用： var section = $(‘.section‘)；這是jquery包裝的dom元素，其他前端框架返回的可能也是一個包裝元素，我們需要獲得的是裏面的html的dom元素

html元素的位置和大小圖表

scrolltop wid idt htm blog oss ext set pre offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLef

rem根據螢幕寬度來調整html根元素的font-size

使用rem作為單位寫頁面：用rem作為頁面的寬高單位就可以根據螢幕寬度的變化來及時適應。根據螢幕寬度來調整html根元素的font-size（即rem）需要一段js程式碼：(function (doc, win) {var docEl=doc.documentElement;

根據視窗大小自動調整元素大小

function updatesize(){var bodyw = window.document.body.offsetWidth;if(bodyw <= 790) objmain.style.width="772px";else if(bodyw >= 1016) objmain.style.

瀏覽器視口大小、HTML元素偏移量的獲取

獲取瀏覽器（<html>/<body>）視口大小這個函式首先檢查document.compatMode屬性，確定瀏覽器是否執行在混雜模式。大多數瀏覽器都執行在標準模式下，所以會自動執行else程式碼。 function getVi

JavaScript中提供獲取HTML元素位置的屬性：

瀏覽器 var func set height cti fse 屬性 turn HTMLElement.offsetLeft HTMLElement.offsetHeight 但是需要註意的是，這兩個屬性所儲存的數值並不是該元素相對整個瀏覽器畫布的絕對位置，而是相對於其父

juqery動態添加HTML元素

元素 hello end rip type b- pre app ava <div id="div"></div><script type="text/javascript"> $("#div").html("<p>這是

使用 CSS3 的 box-sizing 屬性設置元素大小包含 border 與 padding

lang htm tle 內部 p s itl css3 div char 默認情況下，內部元素（如：input）的寬度或高度，是不會包含元素的邊框和內邊距的，這是就需要使用 box-sizing 屬性設置該元素。 box-sizing 是 CSS3 的屬性，可以設置以

隱藏html元素

jquer php .com meta query nbsp cti scrip on() <!DOCTYPE html><html><head><meta charset="utf-8"> <title>cesh

禁止微信內置瀏覽器調整字體大小

重寫 adjust dev llb document ner ack 設置 ridge 原因：制作微信頁面是，用戶設置微信默認字體大小，而造成頁面布局的不忍直視解決方案： iOS： /* IOS禁止微信調整字體大小 */ body { -webkit-t

HTML元素的專用傳參數據屬性

原生 oid color html5 兩個參考高精兼容 ice 把參數直接放到事件定義裏面，類似下面這樣，也是可以，但是這樣不夠Nice. <a href="javascript:void(0)" onclick="clickhandler(arg1)"

【實用代碼片段】將json數據綁定到html元素（轉）

bsp lac website dex spl his can ace htm jQuery擴展 jQuery.fn.extend({ ‘jsonBind‘:function(json){ var dom=this; dom.find(‘[json-b

理解描述頁面元素大小的幾種方式

border title 目錄 .get 等等 wid 技術分享 document utf-8 　　　我們經常可以看到關於描述頁面元素大小的屬性，比如：offsetWidth、clientWidth以及scrollWidth等等。但是，要正確區分它們可能就不是一件容易的

question 002: dev c++ 當中如何調整字體大小？How to get the first program with C++? c++屬於什麽軟件？

space 什麽 pil get ctrl+鼠標 iostream 系統 using clu 方法：按住ctrl+鼠標滑輪滾動 c++屬於系統軟件還是應用軟件？說哪個都不對，編譯之前屬於應用軟件，after compile ,it belongs to system so

linux 邏輯卷管理調整分區大小

host real rmi this 運行 linux 邏輯卷 meta 4.0 resize 測試機各種報錯，創建個目錄都報錯，df看了一下，發現VolGroup-lv_root 100%，虛擬磁盤滿了，怎麽辦呢1，解決過程 # df -h //查看分區 # um

web基礎，用html元素制作web頁面

問答 pla 下拉 cti footer spa 無序信息 ges 用div,form制作登錄頁面，盡可能做得漂亮。練習使用下拉列表選擇框，無序列表，有序列表，定義列表。觀察常用網頁的HTML元素，在實際的應用場景中，用已學的標簽模仿制作。 <!DOCTYP

作業14——web基礎，用html元素制作web頁面

應用 dbi val html 排行有序 ges 小說輸入觀察常用網頁的HTML元素，在實際的應用場景中，用已學的標簽模仿制作。用div,form制作登錄頁面，盡可能做得漂亮。練習使用下拉列表選擇框，無序列表，有序列表，定義列表。 <!DOCTYPE ht

web基礎與 web基礎，用html元素制作web頁面

測試平臺 doc 方式 .cn 學生 option ade 新聞任務認識URL，觀察常用網站網址，區分不同組成部分。uscheme://host:port/path/?query-string=xxx#anchor11 觀察web瀏覽過程. HTML基礎。練習使用標簽制

調整html元素大小 resize

相關推薦