var celulaCSS = `{? background-image: url('thumbnails/thumbnailXXX.jpg');? background-position:center;? background-repeat:no-repeat;? background-size:cover;? width:300px;?? height:169px;? transition: transform .2s; /* Animation */? margin: 0 auto;}`;function createDiv(number) {? var numString = number.toString(10);? const type = 'text/css';? var css = "#thumbnailXXX".concat(celulaCSS);? css = css.replace(/XXX/g, numString);? let div = document.createElement('div');? div.id = 'thumbnailXXX'.replace(/XXX/g, numString);? var style = document.createElement('style');? style.type = type;? style.appendChild(document.createTextNode(css));? document.head.appendChild(style);? return div;}createDiv(number)將創建一個id類似于 的css #thumbnailX，其中 X 是傳遞給函數的數字，創建一個div，將其應用于id新的 div 并返回它。我現在想做的是hover通過創建一個名為的新樣式#thumbnailX:hover {transform: scale(1.5);}并將其添加到主體樣式中，向該 id 添加一個屬性。所以，我將代碼修改為var celulaCSS = `{? background-image: url('thumbnails/thumbnailXXX.jpg');? background-position:center;? background-repeat:no-repeat;? background-size:cover;? width:300px;?? height:169px;? transition: transform .2s; /* Animation */? margin: 0 auto;}`;var celulaZOOM = `{? ? transform: scale(1.5);?}`;function createDiv(number) {? var numString = number.toString(10);? const type = 'text/css';? var css = "#thumbnailXXX".concat(celulaCSS);? css = css.replace(/XXX/g, numString);? let div = document.createElement('div');? div.id = 'thumbnailXXX'.replace(/XXX/g, numString);? var style = document.createElement('style');? style.type = type;? style.appendChild(document.createTextNode(css));? document.head.appendChild(style);}但最后一部分createDiv不起作用。控制臺上沒有錯誤。
1 回答
MM們
TA貢獻1886條經驗 獲得超2個贊
你的代碼正在運行。您只是編寫styleZoom = type而不是這樣styleZoom.type = type，您基本上設置styleZoom為文本并覆蓋該元素。
我再次認為最好給所有元素一個類，然后添加到 css 中：
.myClass:hover {
transform: scale(1.5);
}- 1 回答
- 0 關注
- 130 瀏覽
添加回答
舉報
0/150
提交
取消