Finding strikeout text within <s> or <del> tags can be identified by closely examining the HTML codes

The issue arises with the text that reads as follows:

316.6.1 Structures. Structures shall not be constructed

This is represented in HTML as:

<b>
    <s>
        <span style='font-size:10.0pt'>316.6.1 Structures</span>
    </s>
</b>
<s>
    <span style='font-size:10.0pt'>. Structures shall not be
        <span style='letter-spacing:.75pt'> </span>
        constructed
    </span>
</s>

However, there seems to be an issue with the text-decoration property not displaying the line-through value correctly:

span_array = document.getElementsByTagName('span'));
> HTMLCollection(74812)

span_array[10648].innerText
> "316.6.1 Structures"
window.getComputedStyle(span_array[10648], null).getPropertyValue("text-decoration");
> "none solid rgb(0, 0, 0)"

span_array[10649].innerText
> ". Structures shall not be constructed"
window.getComputedStyle(span_array[10649], null).getPropertyValue("text-decoration");
> "none solid rgb(0, 0, 0)"

I would anticipate a result such as: line-through solid rgb(0, 0, 0). In essence, my goal is to find a way to flag the strikeout text mentioned above. For your information, I should be able to execute the script using Google Chrome Driver/Selenium.

javascripthtmlcssselenium

Answer №1

By utilizing this feature, you are able to retrieve a comprehensive list of styles associated with an element and its predecessors. Alternatively, you can verify if a specific style has been applied:

function obtainStyles(element, style = null, value = null, styleArray = [])
{
  try
  {
    if (element)
    {
      const computedStyles = window.getComputedStyle(element);
      if (value !== null && style !== null && computedStyles[style] == value)
        return true;

      styleArray[styleArray.length] = style ? computedStyles[style] : computedStyles;
      return obtainStyles(element.parentNode, style, value, styleArray);
    }
  }catch(error){}
  return value === null ? styleArray : false;
}

// Returns true/false if the "textDecorationLine" property is set to "line-through" for this element or any of its ancestors
console.log( obtainStyles(document.querySelector("span"), "textDecorationLine", "line-through") ); 

// Retrieves an array of textDecorationLine values for the specified element and its lineage
console.log( obtainStyles(document.querySelector("span"), "textDecorationLine") );

// Obtains a list of all styles pertaining to the specified element and its ancestry
console.log( obtainStyles(document.querySelector("span")) );
<b>
    <s>
        <span style='font-size:10.0pt'>316.6.1 Structures</span>
    </s>
</b>
<s>
    <span style='font-size:10.0pt'>. Structures shall not be
        <span style='letter-spacing:.75pt'> </span>
        constructed
    </span>
</s>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Jquery Simplyscroll to incorporate images on both the left and right side within a container or clip

I am currently utilizing Jquery Simplyscroll (http://logicbox.net/jquery/simplyscroll/) and I am seeking a way to incorporate a faded png image on both the left and right sides to prevent my images from appearing "cut off" while sliding through. Below is ...

jquerycss

Setting distinct fonts for input placeholder and value: A guide

Can different fonts be set for an input placeholder and value? I have a scenario where the input placeholder is in a right-to-left language while the value is in English. Is it achievable using CSS3? ...

htmlcssplaceholderhtml-input

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

Receiving form input through an express route and attempting to insert it into a MySQL database results in empty entries

Welcome everyone! I'm brand new to this and just starting out with express. It seems like I've hit a roadblock and can't figure it out on my own. After spending the day learning, I can't seem to get my message to appear properly in the ...

htmlmysqlnode.jsexpress

What is the best way to choose the checked items and calculate the total price by adding up all the prices of the selected items?

Seeking help with utilizing JavaScript to identify and collect all checked items from an HTML file. I'm looking to determine which items have been selected from a menu, each of which has an associated price. How can I access the prices of the chec ...

javascriptarrayssplitsumnumbers

Load additional content seamlessly using Ajax in Django without needing to reload the entire navigation bar

I recently started working with Django as I develop my own website. I have created a base.html file which includes the main body, CSS, js, fonts, and navbar that will be present on all pages of my site. The navbar is located in another HTML file called nav ...

pythonhtmldjangoajax

Tips for identifying modifications in an input text field and activating the save button

Currently, I am developing a function that can detect any changes made in the text field and then activate the save button accordingly. This code is being executed in Visual Studio 2017, using HTML and JavaScript. (function () { var customer_addres ...

javascriptjqueryhtmljson

navigate back to the previous tab using protractor

When I open a new tab (second), I attempt to switch back to the first tab. common.clickOpenNewSession(); //opens a new tab browser.getAllWindowHandles().then(function (handles) { var secondWindowHandle = handles[1]; var firstWindowHandle ...

javascriptangularjsselenium-webdriverprotractor

absence of an export called

I am facing an issue with importing a simple component in my React project. I am unable to locate the component causing this error. The error message I am receiving while importing the component is as follows: ./src/App.js 61:28-32 './componentes/ ...

javascriptreactjs

The sticky navigation and scroll to top features both function perfectly on their own, but when used simultaneously, they do not work

I'm facing an issue with two scripts on my website - when they are separate, they work perfectly fine but together, they don't seem to function properly. What could I be missing here? Script 1: window.onscroll = function() {myFunction()}; var n ...

javascriptcssscrolltop

What is the best way to prevent text-decoration from being applied to icons when utilizing font-awesome inside a hyperlink?

I recently began using FontAwesome and it's been going well. However, I have a question about using it with an anchor tag that has text-decoration:none, and on hover text-decoration:underline. Whenever I hover over the link, the icon also receives the ...

cssfont-awesome

I am having trouble styling a pre-existing class in bootstrap using my custom CSS file

html <section id="title"> <div class="container-fluid"> <!-- Nav Bar --> <nav class="navbar navbar-expand-lg navbar-dark"> <a class=" navbar-brand">tindog</a> ...

htmlcssbootstrap-5

Display text with a hover effect

When I hover over an image, I want to display some text. I managed to make it work, but the text was expanding the size of the card. To solve this issue, I added a display none to the text class. I can't include all the code here, so here's a sn ...

htmlcssbootstrap-4

Is there a way to automatically open an expand/collapse section when linking to it?

I am attempting to automatically open the bootstrap expand/collapse details when linking to them from another page. For instance, I want to link to a page similar to , which includes multiple expand/collapse sections. My goal is to link to a specific sect ...

htmlhyperlinkbootstrap-4expand

Limit the execution speed of a JavaScript function

My JavaScript code is set up to trigger a click event when the user scrolls past a specific element with the class .closemenu. This is meant to open and close a header menu automatically as the user scrolls through the page. The problem I'm facing is ...

javascriptjqueryscrollscrolltop

Issue encountered when updating npm to version 5.4.2: Unable to locate modules in ./node_modules/react-router-dom

When attempting to update my npm version from 3.10.10 to 5.4.2 and migrate react from 15.3.0 to 16.0, I deleted the node_modules folder and re-ran npm install. However, upon trying to run my application again, I encountered the following error: ERROR in ./ ...

javascriptnode.jsnpmmaterial-uireact-router-dom

Is there a way to create an infinite fade in/out effect for this?

Is there a way to ensure that the method runs after the "click" event in this code snippet? The code currently fades in and out the div #shape while the start variable is true, but when I call the "start" method from the "click" event, the browser stops wo ...

javascriptjquery

Is there a particular motive behind the decision for `arguments` to be treated as an object

Today while coding, I came across something puzzling. arguments.concat(someNumber); This line gave me an error for undefined function. Initially, I assumed that arguments was a native object for optimization purposes, but later discovered it's simp ...

javascript

The issue with the Z-index being ineffective is causing the button to appear behind a container in the HTML-CSS

I am currently using Metro CSS (Windows 8 style) and running into an issue. Within my container, there are alerts displayed in blue, and above that is 'IT-CENTER'. When I click on 'IT-CENTER', a button should appear, but it seems to be ...

javascripthtmlcssmicrosoft-metrometro-ui-css

The jQuery script version 3.5.1 encountered an error at line 4055 where DataTables was unable to access the property "aDataSort" due to it

Hey there, I'm currently facing a small challenge while trying to incorporate Datatables within a bootstrap modal to display the results of a SQL Server query. The main requirement is to provide the option to export the data as an Excel file or in oth ...

javascriptphpjquerybootstrap-4datatables