要找到 keyInfo 元素并在添加按钮的部分进行 CSS 样式的修改，可以按照以下方式进行整合。在你的代码中，我们可以通过获取 keyInfo 的元素，然后在创建按钮后对其样式进行更改。下面是完整的代码示例：
for (const item of jsonRes) {
if (item.code === 'customerInfo') {
// 在这里处理客户信息展示
const keyInfoElement = document.getElementById('idkeyInfo');
// 修改 keyInfo 的样式
if (keyInfoElement) {
keyInfoElement.style.backgroundColor = 'lightblue';
keyInfoElement.style.color = 'black';
keyInfoElement.style.fontSize = '20px';
}
}
if (item.code === 'loan') { // 合同展示
const buttonContainer = document.createElement('div');
buttonContainer.innerHTML = `
<div class="button-container">
<button class="btn" data-action="action1">按钮1</button>
<button class="btn" data-action="action2">按钮2</button>
<button class="btn" data-action="action3">按钮3</button>
<button class="btn" data-action="action4">按钮4</button>
</div>
`;
document.body.appendChild(buttonContainer);
// 定位 buttonContainer 的位置
buttonContainer.style.position = 'absolute'; // 或者使用其他定位方式，比如 relative, fixed等
buttonContainer.style.top = '100px'; // 根据需要设置 Y 轴位置
buttonContainer.style.left = '50px'; // 根据需要设置 X 轴位置
buttonContainer.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', function() {
const action = this.getAttribute('data-action');
switch (action) {
case 'action1':
console.log('按钮1被点击');
break;
case 'action2':
console.log('按钮2被点击');
break;
case 'action3':
console.log('按钮3被点击');
break;
case 'action4':
console.log('按钮4被点击');
break;
default:
break;
}
});
});
}
}
解释：
修改
keyInfo的样式：在处理'customerInfo'时，我们通过document.getElementById('idkeyInfo')获取到该元素，并直接修改其 CSS 属性。创建并定位新的按钮容器：我们在
'loan'条件下创建一个新的div容器，里面包含多个按钮。然后我们给这个容器设置了绝对定位（也可以根据需求选择其他定位方式），并设定了它的位置。
请根据实际情况调整 top 和 left 值，以确保新添加的按钮容器能够出现在你希望的位置。
内容由零声教学AI助手提供，问题来源于学员提问
