onMounted(() => {
const handleSetTooltipStyle = () => {
let body = document.getElementById('m-body')
let rect = body.getBoundingClientRect()
body.className = `m-body ${import.meta.env.MODE === 'development' ? 'prod' : 'prod'}`
console.log('rect', rect)
let styleId = 'm-tooltip'
let styleElement = document.getElementById(styleId)
if (styleElement) {
styleElement.parentNode.removeChild(styleElement)
}
let style = document.createElement('style')
style.type = 'text/css'
style.id = 'm-tooltip'
style.innerHTML = `
.m-body.dev .gc-spread-toolTip {
transform: translate(-100px, -100px)!important;
}
.m-body.prod .gc-spread-toolTip {
transform: translate(-${rect.left}px, -${rect.top}px)!important;
}
`
document.body.appendChild(style)
}
handleSetTooltipStyle()
window.$wujie?.bus.$on('msg', function (payload) {
console.log(payload)
if (payload.type === 'showMenu') {
handleSetTooltipStyle()
}
})
})
js原生修改元素的class,获取元素的坐标,动态添加删除style标签
原创徐同保的博客 ©著作权
文章标签 javascript 开发语言 ecmascript css 人工智能 文章分类 Python 后端开发
-
原生js获取某个class的所有div元素
原生js获取某个class的所有div元素
js css javascript html5 dom -
通过JS修改元素样式
语法元素.style.样式名 = 样式值如果CSS的样式中含有 - 的情况解决方法:去掉- 然后将后面的首字母大写
javascript 解决方法 首字母 css 其他