ssdemajia/selectAndShare.html

## selectAndShare.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>

    <div id="ss">
        dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
        meta charset="UTF-8">
        meta name="
        dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
        meta charset="UTF-8">
        meta name="
        dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
        meta charset="UTF-8">
        meta name="dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
        meta charset="UTF-8">
        meta name="dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
        meta charset="UTF-8">
        meta name="
    </div>
    <div>
            值	描述
            block	元素呈现为块级元素。
            compact	元素呈现为块级元素或内联元素，取决于上下文。
            inherit	display 属性的值从父元素继承。
            inline	默认。元素呈现为内联元素。
            inline-block	元素呈现为内联盒子内的块盒子。
            inline-table	元素呈现为内联表格（类似 table>），表格前后没有换行符。
            list-item	元素呈现为列表。
            marker	该值在盒子前后设置内容作为标记（与 :before 和 :after 伪元素一起使用，否则该值与 "inline" 是相同的）。
            none	元素不会被显示。
            run-in	元素呈现为块级或内联元素，取决于上下文。
            table	元素呈现为块级表格（类似table>），表格前后带有换行符。
            table-caption	元素呈现为表格标题（类似 aption>）。
            table-cell	元素呈现为表格单元格（类似td> 和 h>）。
            table-column	元素呈现为单元格的列（类似 <）。
            table-column-group	元素呈现为一个或多个列的分组（类似roup>）。
            table-footer-group	元素呈现为表格页脚行（类似tfoot>）。
            table-header-group	元素呈现为表格页眉行（类似head>）。
            table-row	元素呈现为表格行（类似 r>）。
            table-row-group	元素呈现为一个或多个行的分组（类ody>）。
    </div>
    <div id="share">
        分享
    </div>
    <script>
        var share = document.querySelector('#share');
        document.addEventListener('mouseup', function(e) {  // 在document上这样下一次点击如果没有选取，就会把share隐藏
            var select = document.getSelection();
            var text = select.toString(); // 通过转化字符串得知是否当前是出于选中文字状态
            if (text) {
                share.style.display = "inline";
                var range = select.getRangeAt(0);
                var position = range.getBoundingClientRect();  // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
                var left = position.left;
                var width = position.width;
                var top = position.top;
                var height = position.height;
                share.style.left = left+width/3 + 'px';
                share.style.top = top+height+10 + 'px';
            }
            else {
                share.style.display = "none";
            }
        })
    </script>
    <style>
        #share {
            display: none;
            position: absolute;
            background-color: bisque;
            box-shadow: 1px 1px 11px rgba(0, 0, 0, 0.5);
            padding: 2px;
        }
    </style>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<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>Document</title>
	</head>
	<body>

	<div id="ss">
	dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
	meta charset="UTF-8">
	meta name="
	dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
	meta charset="UTF-8">
	meta name="
	dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
	meta charset="UTF-8">
	meta name="dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
	meta charset="UTF-8">
	meta name="dsadsdhjhifoafhidoahfido;ahfd;anvk;cn
	meta charset="UTF-8">
	meta name="
	</div>
	<div>
	值描述
	block 元素呈现为块级元素。
	compact 元素呈现为块级元素或内联元素，取决于上下文。
	inherit display 属性的值从父元素继承。
	inline 默认。元素呈现为内联元素。
	inline-block 元素呈现为内联盒子内的块盒子。
	inline-table 元素呈现为内联表格（类似 table>），表格前后没有换行符。
	list-item 元素呈现为列表。
	marker 该值在盒子前后设置内容作为标记（与 :before 和 :after 伪元素一起使用，否则该值与 "inline" 是相同的）。
	none 元素不会被显示。
	run-in 元素呈现为块级或内联元素，取决于上下文。
	table 元素呈现为块级表格（类似table>），表格前后带有换行符。
	table-caption 元素呈现为表格标题（类似 aption>）。
	table-cell 元素呈现为表格单元格（类似td> 和 h>）。
	table-column 元素呈现为单元格的列（类似 <）。
	table-column-group 元素呈现为一个或多个列的分组（类似roup>）。
	table-footer-group 元素呈现为表格页脚行（类似tfoot>）。
	table-header-group 元素呈现为表格页眉行（类似head>）。
	table-row 元素呈现为表格行（类似 r>）。
	table-row-group 元素呈现为一个或多个行的分组（类ody>）。
	</div>
	<div id="share">
	分享
	</div>
	<script>
	var share = document.querySelector('#share');
	document.addEventListener('mouseup', function(e) { // 在document上这样下一次点击如果没有选取，就会把share隐藏
	var select = document.getSelection();
	var text = select.toString(); // 通过转化字符串得知是否当前是出于选中文字状态
	if (text) {
	share.style.display = "inline";
	var range = select.getRangeAt(0);
	var position = range.getBoundingClientRect(); // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
	var left = position.left;
	var width = position.width;
	var top = position.top;
	var height = position.height;
	share.style.left = left+width/3 + 'px';
	share.style.top = top+height+10 + 'px';
	}
	else {
	share.style.display = "none";
	}
	})
	</script>
	<style>
	#share {
	display: none;
	position: absolute;
	background-color: bisque;
	box-shadow: 1px 1px 11px rgba(0, 0, 0, 0.5);
	padding: 2px;
	}
	</style>
	</body>
	</html>