jquery 向html body 元素内添加子元素并设置样式知识点.txt

// 向网页body中添加元素。
let innerHTML = '<div id="BIMFloors">BIM分层</div>';
$("body").append(innerHTML);
// 移除元素。
$("#BIMFloors").remove();

$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

// 以下要在该页面的右上角加入“整体规划”、“住宅用地”、“商业用地”三个按钮。
//  用以控制相应图层的开/关。<img src="images/openeye.png"  alt="图层状态" />
let htmlEle = '<div id="layerSwitchButtons" onclick="handleLayer(event);">' +
    '<div id="整体规划"><img src="images/openeye.png"  alt="图层状态" />整体规划</div>' +
    '<div id="住宅用地"><img src="images/closeeye.png"  alt="图层状态" />住宅用地</div>' +
    '<div id="商业用地"><img src="images/closeeye.png"  alt="图层状态" />商业用地</div>' +
    '</div>';
// 向网页body中添加元素。
$("body").append(htmlEle);
let layerSwitchButtonsStyle = {
    "position": "absolute",
    "top": "120px",
    "right": "10px",
    "color": "white",
    "font-size": "16px"
};
$("#layerSwitchButtons").css(layerSwitchButtonsStyle);
$("#layerSwitchButtons div").css({
    "margin": "10px 0px",
    "width": "120px",
    "height": "40px",
    "border": "1px solid purple",
    "border-radius": "20px",
    "line-height": "40px", // 单行文本的垂直居中。
    "text-align": "right", // 文本位置：在容器中水平居右。
    "padding-right": "15px",
    "background-color": "rgba(0, 0, 255, 0.4)"
});
$("#layerSwitchButtons div img").css({
    "width": "15px",
    "margin-right": "10px",
    "align": "middle" // 图片垂直居中。
});
$("#layerSwitchButtons div").hover(
    function () {
        /*此函数用于，鼠标悬浮时的样式设置，语法如下：*/
        $('#整体规划:hover').css({
            "border": "1px solid white"
        });
        $('#住宅用地:hover').css({
            "border": "1px solid white"
        });
        $('#商业用地:hover').css({
            "border": "1px solid white"
        });
    },
    function () {
        /*此函数用于，鼠标离开后的样式设置，
        * 必须要有和上一个函数相对应的设置。
        * 语法如下：*/
        $('#整体规划').css({
            "border": "1px solid purple"
        });
        $('#住宅用地').css({
            "border": "1px solid purple"
        });
        $('#商业用地').css({
            "border": "1px solid purple"
        });
    }
);