Take out property that was placed in the "style" tag

Question

Take out property that was placed in the "style" tag

One particular static HTML file that I have consists of the following code:

<style>
  p {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
</style>

<div id="wrapper">
  <p>Insert text here</p>
</div>

<div>
  <input type="checkbox" id="disableOverflowWrap">
  <label for="disableOverflowWrap">Checkbox to disable p { overflow-wrap: break-word; }</label>
</div>

I'm wondering how I can attach an event listener to the checkbox element in order to remove overflow-wrap: break-word; once it is selected?

A snippet of code that I've experimented with is as follows, but unfortunately, it doesn't seem to work:

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

javascript

Answer 1

Answer №1

If you mentioned in the comments that you want the checkbox to toggle the setting on and off, affecting all p elements within the wrapper, one way to achieve this is by toggling a class on #wrapper (or

body</code) that overrides the class on <code>p

. Here's an example:

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;
}

To better visualize the change, I've also added color: green to the original rule and color: black to the override. Here is a live example:

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

If you mentioned in the comments that you want the checkbox to toggle the setting on and off, affecting all p elements within the wrapper, one way to achieve this is by toggling a class on #wrapper (or

body</code) that overrides the class on <code>p

. Here's an example:

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;
}

To better visualize the change, I've also added color: green to the original rule and color: black to the override. Here is a live example:

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 3

Answer №2

To implement word breaking, simply insert the new class .break-word with the property word-break: break-word and then use JavaScript to remove the existing class.

<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 4

To implement word breaking, simply insert the new class .break-word with the property word-break: break-word and then use JavaScript to remove the existing class.

<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 5

Answer №3

The CSS property overflowWrap can be accessed through the style object. To set it to its default value of normal, you can use the following script:

<script>
const button = document.querySelector('#disableOverflowWrap');
button.addEventListener('click', () => {
  const paragraphs = document.getElementsByTagName('p');
      
      for(let index = 0; index < paragraphs.length; index++) {
          paragraphs[index].style.overflowWrap = "normal";
      }
});
</script>

Answer 6

The CSS property overflowWrap can be accessed through the style object. To set it to its default value of normal, you can use the following script:

<script>
const button = document.querySelector('#disableOverflowWrap');
button.addEventListener('click', () => {
  const paragraphs = document.getElementsByTagName('p');
      
      for(let index = 0; index < paragraphs.length; index++) {
          paragraphs[index].style.overflowWrap = "normal";
      }
});
</script>

Take out property that was placed in the "style" tag

Answer №1

Answer №2

Answer №3

Similar questions

jQuery's load method is not responsive when prompted via load

Troubleshooting: AngularJS ng-options failing to populate the list of objects

"Adding an active class to a link based on the current page and locale: A step-by-step

Incorporating multiple colors into a div with jQuery: A guide

Enhance your React Native app: Utilizing dynamic string variables with react-native-google-places-autocomplete query

Understanding the Importance and Benefits of Using the Classnames Utility in React Components

Ways to extract the initial layer of information from a JSON document

Troubleshooting: Why is the AngularUI Modal dialog malfunctioning

Unable to retrieve observable modifications

Ways to incorporate design elements for transitioning focus between different elements

Issue with setting a cookie on a separate domain using Express and React

Updating an HTML input field property with JavaScript is not reflecting the changes

Error encountered while retrieving data from Firebase and storing it in an array within an IONIC application

Is it possible to update a MobX state when a message is received from Firebase in the background?

Make sure that the iframe loads the next page with enough force to break out

Guide to automatically update div with new table rows with the help of Ajax

What is the best way to pass a value back to the main function from an async.eachOfSeries function?

The page is not responding after closing the modal dialog

Steps to obtain an Element binding from a Svelte component

Animating toasts in Bootstrap