Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

viewinheritstyle attribute | viewInheritStyle property

Sets or retrieves a value that indicates whether the document fragment inherits the Cascading Style Sheets (CSS) styles set in the primary document.

Syntax

HTML<element viewinheritstyle="p" ... >
JavaScript

p = object.viewInheritStyle

Property values

Type: Boolean

true (true)

Default. Document fragment inherits CSS styles.

false (false)

Document fragment does not inherit CSS styles.

Remarks

For more information on the CSS styles that can be inherited when viewInheritStyle is set to true, see About Viewlink CSS Inheritance. Inheritable CSS styles are only applied to elements in the document fragment that do not already have the corresponding CSS styles defined.

Examples

In the following sample a div tag contains a custom element that has an element behavior attached to it. The div tag that is located in the primary document sets a number of CSS attributes, specifically the following:

The content of the primary document is shown in the code snippet below.


<html xmlns:myns>
<head>
  <?import namespace="myns" implementation="viewInheritStyle.htc"> 
</head>

<body>
  <div style= "color:red;font-size:12pt;font-Style:italic;border:2px solid blue">
    This text is inside a DIV element in the primary document.
    <br />
    <!-- this is a custom element -->
    <myns:abc></myns:abc>
  </div>
</body>
</html>

The next code snippet shows the content of the HTC file, viewInheritStyle.htc.

The HTC file contains a simple document fragment, which also includes a div tag that uses the following CSS styles.

Because the content in the primary document has CSS styles set on a div tag that contains the custom element, the div tag in the document fragment inherits the inheritable CSS Styles when the viewInheritStyle property is true.


<public:component tagName="abc">
  <attach event="oncontentready" onevent=init() />
</public:component>

<script>
  function init() {
    defaults.viewLink = document;
    defaults.viewInheritStyle = false;
    docFragCaption.innerText = "viewInheritStyle is now set to false";
  }

  function btnChangeInheritance_onClick() {
    boolInherit = defaults.viewInheritStyle;

    if (boolInherit == true) {
      defaults.viewInheritStyle = false;
      docFragCaption.innerText = "viewInheritStyle is now set to false";
    }
    else {
      defaults.viewInheritStyle = true;
      docFragCaption.innerText = "viewInheritStyle is now set to true";
    }
  }
</script>

<body>
  <div id="docFragCaption" style= "font-size:20pt;border:2px solid green"></div>
  <br />
  <input id=btnChangeInheritance type=button value="Toggle viewInheritStyle property" onclick="btnChangeInheritance_onClick()">
</body>

Run the sample to verify that the inheritable CSS styles from the primary document are applied to the document fragment. In this example, the inherited CSS styles are the fontStyle and color properties.

In this example, the border property is not inherited for two reasons. First, the border property not an inheritable property, and second, the property is set explicitly on the div tag in the document fragment.

See also

defaults
Conceptual
Introduction to Viewlink
About Viewlink CSS Inheritance
About Element Behaviors

 

 

Show:
© 2014 Microsoft