// 向网页body中添加元素。
let innerHTML = '<div >BIM分层</div>';
$("body").append(innerHTML);
// 移除元素。
$("#BIMFloors").remove();
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
// 以下要在该页面的右上角加入“整体规划”、“住宅用地”、“商业用地”三个按钮。
// 用以控制相应图层的开/关。<img src="images/" alt="图层状态" />
let htmlEle = '<div onclick="handleLayer(event);">' +
'<div ><img src="images/" alt="图层状态" />整体规划</div>' +
'<div ><img src="images/" alt="图层状态" />住宅用地</div>' +
'<div ><img src="images/" 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"
});
}
);
