Html Question posted in
Some basic documentation can be found here.

Link to the specific line in HTML document

I have an html document inserted in a web page, and my goal is to implement the button which will point to the text with colored background in those doc.
The problem is, I’m not allowed to modify document itself, so I can’t add there a tag with an ID.

Is there any way to create a link which points to the special text in html, like "style="background-color:#FFC1C1""?

Tags:

2

Answers


  1. 0

    Add a button to your webpage that will trigger the JavaScript function

    <button onclick="my()">My Button</button>

    Create the JavaScript function that will search for the text with the specified style and scroll to it:

    <script>
function my() {
    var elements = document.getElementsByTagName('*');
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var style = window.getComputedStyle(element);
        if (style.backgroundColor === 'rgb(255, 193, 193)') { // Color in RGB format
            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
            element.style.border = '2px solid red'; // Example: adding a border
            break;
        }
    }
}
</script>
    Login or Signup to reply.
  2. 0 
    document.getElementById('highlight-button').addEventListener('click', function() {
    // Select all elements with the specified background color
    var elements = document.querySelectorAll('[style*="background-color: #FFC1C1"]');

    if (elements.length > 0) {
        // Scroll to the first matched element
        elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });

        // Optionally, you can add a class to emphasize it further
        elements[0].classList.add('highlighted');
        
        // Remove the class after a while to return to normal
        setTimeout(function() {
            elements[0].classList.remove('highlighted');
        }, 2000); // 2 seconds
    } else {
        alert('No element found with the specified background color.');
    }
});
    /* Add this to make the highlighting more noticeable */
.highlighted {
    border: 2px solid red;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highlight Text</title>
    <style>
        /* Adding some content for demonstration */
        .content {
            height: 2000px; /* just to make sure there's enough scrollable content */
        }
        .highlight {
            background-color: #FFC1C1;
        }
    </style>
</head>
<body>
    <button id="highlight-button">Highlight Text</button>
    <div class="content">
        <!-- Example content, this should be the embedded document you mentioned -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        <p style="background-color: #FFC1C1;">Special highlighted text that needs to be found.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search