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)將創(chuàng)建一個(gè)id類似于 的css #thumbnailX，其中 X 是傳遞給函數(shù)的數(shù)字，創(chuàng)建一個(gè)div，將其應(yīng)用于id新的 div 并返回它。我現(xiàn)在想做的是hover通過創(chuàng)建一個(gè)名為的新樣式#thumbnailX:hover {transform: scale(1.5);}并將其添加到主體樣式中，向該 id 添加一個(gè)屬性。所以，我將代碼修改為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不起作用?？刂婆_(tái)上沒有錯(cuò)誤。
1 回答
MM們
TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊
你的代碼正在運(yùn)行。您只是編寫styleZoom = type而不是這樣styleZoom.type = type，您基本上設(shè)置styleZoom為文本并覆蓋該元素。
我再次認(rèn)為最好給所有元素一個(gè)類，然后添加到 css 中：
.myClass:hover {
transform: scale(1.5);
}- 1 回答
- 0 關(guān)注
- 141 瀏覽
添加回答
舉報(bào)
0/150
提交
取消