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

Customizing CSS styles for various screen dimensions

I am facing an issue with my CSS code where I want to apply different styles for a specific class on smaller devices compared to larger screens. My project primarily uses Bootstrap, but I have also included some custom CSS. On "normal" sized screens, I hav ...

htmlcsstwitter-bootstrap

"What might be causing the error 'cannot access property 'top' of undefined' while trying to read

My website has a sticky navbar fixed at the top, and this is the structure of my sticky navbar: $(function() { $(window).scroll(function() { if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") { ...

javascriptjqueryhtmlcss

View cards from a restricted Trello board without requiring visitors to have a Trello account or to authorize through a popup

I have a company with ongoing projects listed on a private Trello board. We are interested in showcasing these projects on our website in real-time by connecting to the board. After implementing this example, I can successfully retrieve and display the ca ...

javascriptphpjquerytrello

Changes influencing independent div elements

My goal is to design a front-end screen with images labeled steps 1-4 lined up next to each other. The concept is that when the user hovers over one of these steps, the corresponding image should fade in below them in a separate div. Upon removing the curs ...

csshtmlfrontendtransition

Synchronous AJAX requests do not function properly in IE and Firefox, but they do work in Chrome and Safari

Attempting to measure download speed using an AJAX call. Below is the code snippet: var start = new Date(); $.ajax ({ url: 'https://www.example.com/perftest/dummyFile1024', cache: false, success : function() { var total = ( ...

javascriptajaxjqueryasynchronous

Create a setup page upon initial login using express.js

Currently, I am implementing Passport.js for user authentication on my express.js application. I aim to display a setup page upon the initial login of the user. Is it possible to achieve this using Passport? ...

javascriptnode.jsexpresspassport.js

Tips for finding the element in an iframe using Python with Selenium WebDriver

During my automation testing on the website , I encountered difficulty locating a specific element with Selenium. The element in question is the search bar located at the top of the page, used for searching stocks. My goal is to locate this element and in ...

python-3.xseleniumxpathcss-selectorswebdriverwait

Activate the Click in the Span Element with no Matching ID to the Final Segment of the URL

I'm facing an issue with triggering the click event on a specific span that lacks an id attribute. This particular span has an empty ID and doesn't respond when I try to click the back or forward buttons in the browser. All other spans trigger th ...

javascriptjqueryhtml5-history

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

javascriptcssangulartypescript

Displaying Props Information in a Modal Window using React

Currently venturing into the realm of React JS, where I am in the process of developing a sample eCommerce application for real-time use. However, I have hit a roadblock. In my Products List, there is a Buy button for each product. When clicking on this b ...

javascriptreactjsecmascript-6material-ui

Concealing my menu with overflow-x: hidden on the body is not an option

Despite setting overflow-x: hidden on the body element, I'm still experiencing horizontal scrolling and can't seem to find a solution. I've searched online for solutions without success. That's why I'm reaching out here in hopes o ...

javascripthtmlcss

NPM is searching for the package.json file within the user's directory

After completing my test suite, I encountered warnings when adding the test file to the npm scripts in the local package.json. The issue was that the package.json could not be located in the user directory. npm ERR! path C:\Users\chris\pack ...

javascriptnpm

The I am facing an issue with Material-ui Grid where the width of the Grid item is too large and extending beyond the boundaries

I'm in the process of setting up a basic layout for a single-page application using Material-ui and React. My plan is to have a sidebar on the left-hand side and a main area on the right-hand side to display information. However, I am facing two issue ...

cssreact-nativeflexboxmaterial-ui

Encountering a jQuery error while attempting to initiate an AJAX request

I'm currently working on a project in SharePoint and I want to integrate JQuery to make an ajax call from the homepage. However, when I attempt to make the call, I encounter an error stating "Array.prototype.slice: 'this' is not a JavaScript ...

javascriptjqueryajaxsharepoint-2010

Revamping CSS for a Responsive Wordpress Tesseract Theme

I'm currently in the process of developing a website using the Tesseract theme at thevandreasproject.com. However, I have encountered an issue with responsiveness when integrating the SiteOrigins PageBuilder plugin. The compatibility between PageBuild ...

csswordpresstesseract

What's the most effective method to incorporate additional events into this element using the conditional operator?

Looking for help with this code snippet: <span role="link" tabindex="0" :class="tabDetails.showPayment ? 'link' : ''" @click="tabDetails.showPayment ? cTab('payments') : null" ...

javascriptvue.js

Enhance the readability and writability of the properties of JavaScript objects

I'm curious if there's a way to make existing properties of JavaScript objects immutable after they've been assigned. Essentially, what I want is to lock in the current properties of an object but still allow new ones to be added. Can exis ...

javascriptnode.js

Next.js: Generating static sites only at runtime due to getStaticProps having no data during the build phase, skipping build time generation

I am looking to customize the application for individual customers, with a separate database for each customer (potentially on-premise). This means that I do not have access to any data during the build phase, such as in a CI/CD process, which I could use ...

javascriptreactjstypescriptnext.js

Update an existing JSON document

Looking for a solution to update the json file while retaining specific strings and values? const fs = require('fs'); var logPath = 'log.json' var logRead = fs.readFileSync(logPath) var logFile = JSON.parse(logRead) LogChannel = &apo ...

javascriptnode.jsjson

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

cssreactjssafariresponsive-designmedia-queries