如何获得以前的数据颜色属性?

问题是:

在您的代码中编写代码，记录#cro-headline元素的data-color属性每次更改时的当前值和以前的值。你的日志语句应该看起来像这样:console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);

我的答案是:

var oldFunction = window.changeHeadlineColor;
window.changeHeadlineColor = function(croHeadline) {
oldFunction(croHeadline);
var currentElement = document.querySelector('#cro-headline');
var currentColor = currentElement.dataset.color;
var previousElement = currentElement.previousElementSibling;
var previousColor = previousElement.dataset.color;
console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);
}

我只是不完全确定如何记录data-color属性的前一个值。任何帮助将非常感激!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
[data-color="red"] { color: red; }
[data-color="blue"] { color: blue; }
[data-color="green"] { color: green; }
[data-color="orange"] { color: orange; }
[data-color="purple"] { color: purple; }
</style>
<script>
window.myHandler = function () {
console.log('Click!');
};
window.getRandomNumber = function (max) {
return Math.floor(Math.random() * max)
}
var colors = ['red', 'blue', 'green', 'orange', 'purple'];
window.changeHeadlineColor = function (croHeadline) {
var random = getRandomNumber(5000);
var randomString = random.toString();
setTimeout(() => {
var colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
croHeadline.setAttribute('data-color', colors[colorKey]);
changeHeadlineColor(croHeadline);
}, random);
};
</script>
<script>
////////////////////
/* YOUR CODE HERE */
////////////////////
</script>
</head>
<body>
<div id="myDiv">OMG Click me!</div>
<script>
document.querySelector('#myDiv').addEventListener('click', myHandler);
setTimeout(() => {
myDiv.insertAdjacentHTML('beforebegin', '<h1 id="cro-headline" data-color="red">Cro Metrics</h1>');
var croHeadline = document.querySelector('#cro-headline');
changeHeadlineColor(croHeadline);
}, getRandomNumber(5000));
</script>
</body>
</html>

我刚刚添加了一个previousColor = currentColor。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
[data-color="red"] {
color: red;
}

[data-color="blue"] {
color: blue;
}

[data-color="green"] {
color: green;
}

[data-color="orange"] {
color: orange;
}

[data-color="purple"] {
color: purple;
}
</style>
<script>
window.myHandler = function() {
console.log('Click!');
};
window.getRandomNumber = function(max) {
return Math.floor(Math.random() * max)
}
var colors = ['red', 'blue', 'green', 'orange', 'purple'];
window.changeHeadlineColor = function(croHeadline) {
var random = getRandomNumber(5000);
var randomString = random.toString();
setTimeout(() => {
var colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
croHeadline.setAttribute('data-color', colors[colorKey]);
changeHeadlineColor(croHeadline);
}, random);
};
</script>
<script>
var previousColor;
var oldFunction = window.changeHeadlineColor;

window.changeHeadlineColor = function(croHeadline) {
oldFunction(croHeadline);
var currentElement = document.querySelector('#cro-headline');
var currentColor = currentElement.dataset.color;
console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);
previousColor = currentColor;
}
</script>
</head>
<body>
<div id="myDiv">OMG Click me!</div>
<script>
document.querySelector('#myDiv').addEventListener('click', myHandler);
setTimeout(() => {
myDiv.insertAdjacentHTML('beforebegin', '<h1 id="cro-headline" data-color="red">Cro Metrics</h1>');
var croHeadline = document.querySelector('#cro-headline');
changeHeadlineColor(croHeadline);
}, getRandomNumber(1000));
</script>
</body>
</html>

相关内容

最新更新

热门标签：