删除从标记中添加的属性"style"

Question

我有以下静态HTML文件:

<style>
p {
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
</style>
<div id="wrapper">
<p>Here goes some text</p>
</div>
<div>
<input type="checkbox" id="disableOverflowWrap">
<label for="disableOverflowWrap">Disable p { overflow-wrap: break-word; }</label>
</div>

如何将事件侦听器添加到复选框中，以便复选框应该删除overflow-wrap: break-word;?

我已经尝试了以下操作，但它不起作用:

<script>
const x = document.querySelector('#disableOverflowWrap');
x.addEventListener('click', () => {
const y = document.querySelector('p');
y.removeProperty('overflow-wrap');
});
</script>

Answer 1

在评论中，你说你想要复选框来切换设置的关闭和打开，并且你想要改变影响包装器中的所有p元素。

我会通过切换#wrapper(或body)上的类来覆盖p上的类来做到这一点，像这样:

const cb = document.getElementById("disableOverflowWrap");
const wrapper = document.getElementById("wrapper");
cb.addEventListener('click', ({currentTarget: {checked}}) => {
wrapper.classList.toggle("override-overflow-wrap", checked);
});

#wrapper.override-overflow-wrap p {
overflow-wrap: normal;
}

现场示例(我还将color: green添加到原始规则中，并将color: black添加到覆盖中，以使更改在视觉上更明显):

const cb = document.getElementById("disableOverflowWrap");
const wrapper = document.getElementById("wrapper");
cb.addEventListener('click', ({currentTarget: {checked}}) => {
wrapper.classList.toggle("override-overflow-wrap", checked);
});

p {
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
color: green;
}
#wrapper.override-overflow-wrap p {
overflow-wrap: normal;
color: black;
}

<div id="wrapper">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>
<div>
<input type="checkbox" id="disableOverflowWrap">
<label for="disableOverflowWrap">Disable p { overflow-wrap: break-word; }</label>
</div>

Answer 2

只需添加另一个包含属性word-break: break-word的类.break-word，并使用javascript删除该类。

<style>
p {
overflow-wrap: break-word;
hyphens: auto;
}
.break-word {
background: red;
word-break: break-word;
}
a:any-link {
hyphens: none;
}
</style>
<div id="wrapper">
<p class="break-word">Here goes some text</p>
</div>
<div>
<input type="checkbox" id="disableOverflowWrap">
<label for="disableOverflowWrap">Disable p { overflow-wrap: break-word; }</label>
</div>
<script>
const x = document.querySelector('#disableOverflowWrap');
x.addEventListener('click', () => {
const y = document.querySelector('p');
y.classList.remove('break-word');
});
</script>

Answer 3

overflowWrap属性可以从样式对象中获得，只需将其设置为normal:

<script>
const x = document.querySelector('#disableOverflowWrap');
x.addEventListener('click', () => {
const ps = document.getElementsByTagName('p');

for(let i=0; i < ps.length; i++) {
ps[i].style.overflowWrap = "normal";
}
});
</script>